slider-comp.js
3.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
export default {
props: ["min", "max", "value"],
data() {
return {
slider: null, //滚动条DOM元素
thunk: null, //拖拽DOM元素
per: this.value || 0, //当前值
flags: false,
curWidth: 0,
disX: 0
};
},
methods: {
end(e) {
this.flags = false;
},
down(event) {
let _this = this;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
let e = touch;
_this.curWidth = parseInt(_this.width);
_this.disX = e.clientX;
_this.flags = true;
},
move(event) {
let _this = this;
if (_this.flags) {
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
let e = touch;
let disX = _this.disX;
let width = _this.curWidth;
// 拖拽的时候获取的新width
var newWidth = e.clientX - disX + width;
// console.log("this.slider.offsetWidth:", this.slider.offsetWidth);
// console.log("this.thunk.offsetWidth:", this.thunk.offsetWidth);
// 拖拽的时候得到新的百分比
var scale = newWidth / _this.slider.offsetWidth;
_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
_this.per = Math.max(_this.per, _this.min);
_this.per = Math.min(_this.per, _this.max);
_this.$emit("input", _this.per);
}
},
initData() {
var _this = this;
this.$nextTick(() => {
// 监听PC和移动端事件
this.thunk.addEventListener("mousedown", (e) => {
event.preventDefault();
_this.down(e);
}, false);
this.thunk.addEventListener("touchstart", (e) => {
event.preventDefault();
_this.down(e);
}, false);
document.addEventListener("mousemove", (e) => {
event.preventDefault();
_this.move(e);
}, false);
document.addEventListener("touchmove", (e) => {
event.preventDefault();
_this.move(e);
}, false);
document.addEventListener("mouseup", (e) => {
event.preventDefault();
_this.end(e);
}, false);
document.addEventListener("touchend", (e) => {
event.preventDefault();
_this.end(e);
}, false);
});
}
},
//渲染到页面的时候
mounted() {
this.slider = this.$refs.slider;
this.thunk = this.$refs.trunk;
this.initData();
window.addEventListener('resize', () => {
this.initData();
// console.log("scale:", this.scale);
// 改per的值，强制刷新计算属性computed
let tempPer = this.per;
this.per = 0;
this.per = tempPer;
}, false);
},
computed: {
// 设置一个百分比，提供计算slider进度宽度和trunk的left值
// 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
// trunk left = slider进度width + trunk宽度/2
scale() {
return (this.per - this.min) / (this.max - this.min);
},
width() {
if (this.slider) {
return this.slider.offsetWidth * this.scale + "px";
} else {
return 0 + "px";
}
},
left() {
if (this.slider) {
return (
this.slider.offsetWidth * this.scale -
this.thunk.offsetWidth / 2 +
"px"
);
} else {
return 0 + "px";
}
}
}
};