• Slider 滑块
    • 基础用法
    • 离散值
    • 带有输入框
    • 范围选择
    • 竖向模式
    • Attributes
    • Events

    Slider 滑块

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

    基础用法

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

    Slider 滑块 - 图1

    通过设置绑定值自定义滑块的初始值

    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>
    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>

    离散值

    选项可以是离散的

    Slider 滑块 - 图2

    改变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>
    19. <script>
    20.   export default {
    21.     data() {
    22.       return {
    23.         value6: 0,
    24.         value7: 0
    25.       }
    26.     }
    27.   }
    28. </script>

    显示代码

    带有输入框

    通过输入框设置精确数值

    Slider 滑块 - 图3

    设置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>
    10. <script>
    11.   export default {
    12.     data() {
    13.       return {
    14.         value8: 0
    15.       }
    16.     }
    17.   }
    18. </script>

    范围选择

    支持选择某一数值范围

    Slider 滑块 - 图4

    设置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>
    12. <script>
    13.   export default {
    14.     data() {
    15.       return {
    16.         value9: [4, 8]
    17.       }
    18.     }
    19.   }
    20. </script>

    竖向模式

    Slider 滑块 - 图5

    设置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>
    11. <script>
    12.   export default {
    13.     data() {
    14.       return {
    15.         value10: 0
    16.       }
    17.     }
    18.   }
    19. </script>

    Attributes

    参数 说明 类型 可选值 默认值
    min 最小值 number — 0
    max 最大值 number — 100
    disabled 是否禁用 boolean — false
    step 步长 number — 1
    show-input 是否显示输入框，仅在非范围选择时有效 boolean — false
    show-input-controls 在显示输入框的情况下，是否显示输入框的控制按钮 boolean — true
    input-size 输入框的尺寸 string large / medium / small / mini small
    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 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） 改变后的值

    原文: http://element-cn.eleme.io/#/zh-CN/component/slider