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
| <template>
| <view class="cl-slider">
| <slider
| :value="value"
| :min="min"
| :max="max"
| :step="step"
| :active-color="activeColor"
| :background-color="backgroundColor"
| :block-size="blockSize"
| :block-color="blockColor"
| :show-value="showValue"
| :disabled="disabled"
| @change="onChange"
| @changing="onChanging"
| />
| </view>
| </template>
|
| <script lang="ts">
| import { defineComponent, ref, watch } from "vue";
|
| export default defineComponent({
| name: "cl-slider",
|
| props: {
| // 绑定值
| modelValue: {
| type: Number,
| },
| // 是否禁用
| disabled: {
| type: Boolean,
| default: null,
| },
| // 最小值
| min: {
| type: Number,
| default: 0,
| },
| // 最大值
| max: {
| type: Number,
| default: 100,
| },
| // 步长
| step: {
| type: Number,
| default: 1,
| },
| // 滑块左侧已选择部分的线条颜色
| activeColor: {
| type: String,
| default: "#409eff",
| },
| // 滑块右侧背景条的颜色
| backgroundColor: {
| type: String,
| default: "#e9e9e9",
| },
| // 滑块的大小
| blockSize: {
| type: Number,
| default: 15,
| },
| // 滑块颜色
| blockColor: {
| type: String,
| default: "#ffffff",
| },
| // 是否显示当前值
| showValue: {
| type: Boolean,
| default: false,
| },
| },
|
| emits: ["update:modelValue", "change", "changing"],
|
| setup(props, { emit }) {
| const value = ref(0);
|
| watch(
| () => props.modelValue,
| (val) => {
| value.value = val as number;
| },
| {
| immediate: true,
| },
| );
|
| function onChange(e: any) {
| emit("update:modelValue", e.detail.value);
| emit("change", e);
| }
|
| function onChanging(e: any) {
| emit("update:modelValue", e.detail.value);
| emit("changing", e);
| }
|
| return {
| value,
| onChange,
| onChanging,
| };
| },
| });
| </script>
|
|
