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
| import { VantComponent } from '../common/component';
| import { touch } from '../mixins/touch';
| import { canIUseModel } from '../common/version';
| VantComponent({
| mixins: [touch],
| props: {
| disabled: Boolean,
| useButtonSlot: Boolean,
| activeColor: String,
| inactiveColor: String,
| max: {
| type: Number,
| value: 100,
| },
| min: {
| type: Number,
| value: 0,
| },
| step: {
| type: Number,
| value: 1,
| },
| value: {
| type: Number,
| value: 0,
| observer: 'updateValue',
| },
| barHeight: {
| type: null,
| value: '2px',
| },
| },
| created() {
| this.updateValue(this.data.value);
| },
| methods: {
| onTouchStart(event) {
| if (this.data.disabled) return;
| this.touchStart(event);
| this.startValue = this.format(this.data.value);
| this.dragStatus = 'start';
| },
| onTouchMove(event) {
| if (this.data.disabled) return;
| if (this.dragStatus === 'start') {
| this.$emit('drag-start');
| }
| this.touchMove(event);
| this.dragStatus = 'draging';
| this.getRect('.van-slider').then((rect) => {
| const diff = (this.deltaX / rect.width) * 100;
| this.newValue = this.startValue + diff;
| this.updateValue(this.newValue, false, true);
| });
| },
| onTouchEnd() {
| if (this.data.disabled) return;
| if (this.dragStatus === 'draging') {
| this.updateValue(this.newValue, true);
| this.$emit('drag-end');
| }
| },
| onClick(event) {
| if (this.data.disabled) return;
| const { min } = this.data;
| this.getRect('.van-slider').then((rect) => {
| const value =
| ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
| this.updateValue(value, true);
| });
| },
| updateValue(value, end, drag) {
| value = this.format(value);
| const { min } = this.data;
| const width = `${((value - min) * 100) / this.getRange()}%`;
| this.setData({
| value,
| barStyle: `
| width: ${width};
| ${drag ? 'transition: none;' : ''}
| `,
| });
| if (drag) {
| this.$emit('drag', { value });
| }
| if (end) {
| this.$emit('change', value);
| }
| if ((drag || end) && canIUseModel()) {
| this.setData({ value });
| }
| },
| getRange() {
| const { max, min } = this.data;
| return max - min;
| },
| format(value) {
| const { max, min, step } = this.data;
| return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
| },
| },
| });
|
|
