Slider滑块
... 2021-7-29 About 2 min
# Slider滑块
# 基础用法
通过将type属性的值指定为slider
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "普通滑块",
prop: "slider",
type: 'slider',
},{
label: "初始化值",
prop: "slider",
type: 'slider',
value:2
}, {
label: "隐藏提示",
prop: "slider",
type: 'slider',
showTooltip:false
}, {
label: "格式化值",
prop: "slider",
type: 'slider',
formatTooltip: function(val) {
return '格式化的值' + val;
}
}, {
label: "禁用",
prop: "slider",
type: 'slider',
disabled:true
}]
}
}
}
}
</script>
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
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
Expand Copy Copy
# 离散值
选项可以是离散的
改变step的值可以改变步长，通过设置showStops属性可以显示间断点
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "滑块",
prop: "slider",
type: 'slider',
step: 10,
showStops: true,
}, {
label: "滑块",
prop: "slider",
type: 'slider',
step: 10
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Expand Copy Copy
# 带有输入框
通过输入框设置精确数值
设置showInput属性会在右侧显示一个输入框
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "滑块",
prop: "slider",
type: 'slider',
showInput: true
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 范围选择
支持选择某一数值范围
设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "滑块",
prop: "slider",
type: 'slider',
showStops: true,
max:10,
range: true,
value: [4, 8]
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 竖向模式
设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "滑块",
prop: "slider",
type: 'slider',
vertical: true,
height:200
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy Copy
# 展示标记
设置marks属性可以展示标记
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "滑块",
prop: "slider",
type: 'slider',
range: true,
value: [30, 60],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}]
}
}
}
}
</script>
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
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
Expand Copy Copy