Slider 滑块

通过拖动滑块在一个固定区间内进行选择

基础用法

在拖动滑块时，显示当前值

通过设置绑定值自定义滑块的初始值
 1 <template>
 2   <div class="block">
 3     <span class="demonstration">默认</span>
 4     <el-slider v-model="value1"></el-slider>
 5   </div>
 6   <div class="block">
 7     <span class="demonstration">自定义初始值</span>
 8     <el-slider v-model="value2"></el-slider>
 9   </div>
10   <div class="block">
11     <span class="demonstration">隐藏 Tooltip</span>
12     <el-slider v-model="value3" :show-tooltip="false"></el-slider>
13   </div>
14   <div class="block">
15     <span class="demonstration">格式化 Tooltip</span>
16     <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
17   </div>
18   <div class="block">
19     <span class="demonstration">禁用</span>
20     <el-slider v-model="value5" disabled></el-slider>
21   </div>
22 </template>
23 
24 <script>
25   export default {
26     data() {
27       return {
28         value1: 0,
29         value2: 50,
30         value3: 36,
31         value4: 48,
32         value5: 42
33       }
34     },
35     methods: {
36       formatTooltip(val) {
37         return val / 100;
38       }
39     }
40   }
41 </script>
View Code

离散值

选项可以是离散的

改变step的值可以改变步长，通过设置show-step属性可以显示间断点

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">不显示间断点</span>
 4     <el-slider
 5       v-model="value6"
 6       :step="10">
 7     </el-slider>
 8   </div>
 9   <div class="block">
10     <span class="demonstration">显示间断点</span>
11     <el-slider
12       v-model="value7"
13       :step="10"
14       show-stops>
15     </el-slider>
16   </div>
17 </template>
18 
19 <script>
20   export default {
21     data() {
22       return {
23         value6: 0,
24         value7: 0
25       }
26     }
27   }
28 </script>
View Code

带有输入框

通过输入框设置精确数值

设置show-input属性会在右侧显示一个输入框

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value8"
 5       show-input>
 6     </el-slider>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data() {
13       return {
14         value8: 0
15       }
16     }
17   }
18 </script>
View Code

范围选择

支持选择某一数值范围

设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value9"
 5       range
 6       show-stops
 7       :max="10">
 8     </el-slider>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     data() {
15       return {
16         value9: [4, 8]
17       }
18     }
19   }
20 </script>
View Code

竖向模式

设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性

 1 <template>
 2   <div class="block">
 3     <el-slider
 4       v-model="value10"
 5       vertical
 6       height="200px">
 7     </el-slider>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13     data() {
14       return {
15         value10: 0
16       }
17     }
18   }
19 </script>
View Code

 

Attributes

参数说明类型可选值默认值
min 最小值 number — 0
max 最大值 number — 100
disabled 是否禁用 boolean — false
step 步长 number — 1
show-input 是否显示输入框，仅在非范围选择时有效 boolean — false
show-input-controls 在显示输入框的情况下，是否显示输入框的控制按钮 boolean — true
show-stops 是否显示间断点 boolean — false
show-tooltip 是否显示 tooltip boolean — true
format-tooltip 格式化 tooltip message function(value) — —
range 是否为范围选择 boolean — false
vertical 是否竖向模式 boolean — false
height Slider 高度，竖向模式时必填 string — —
label 屏幕阅读器标签 string — —
debounce 输入时的去抖延迟，毫秒，仅在show-input等于true时有效 number — 300
tooltip-class tooltip 的自定义类名 string — —

Events

事件名称说明回调参数
change 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） 改变后的值

 

posted @ 2018-03-13 06:35  大姐姐小姐姐  阅读(2063)  评论(0)  编辑  收藏  举报