Skip to content

Slider 滑块

规则

js
{
    type:"slider",
    field:"slider",
    title:"滑块",
    value:[0,52],
    props:{
        min: 0,
        max: 100,
        range: true,
    }
}
{
    type:"slider",
    field:"slider",
    title:"滑块",
    value:[0,52],
    props:{
        min: 0,
        max: 100,
        range: true,
    }
}

参考:Vue-design-vue_Slider

value :Number | Array

Props

参数说明类型默认值
autoFocus自动获取焦点booleanfalse
disabled值为 true 时,滑块为禁用状态booleanfalse
dots是否只能拖拽到刻度上booleanfalse
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue
marks刻度标记,key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式object{ number: string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }
max最大值number100
min最小值number0
range双滑块模式booleanfalse
reverse反向坐标轴booleanfalse
step步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 stepnull,此时 Slider 的可选值仅有 marks 标出来的部分。number|null1
tipFormatterSlider 会把当前值传给 tipFormatter,并在 Tooltip 中显示 tipFormatter 的返回值,若为 null,则隐藏 Tooltip。Function|nullIDENTITY
vertical值为 true 时,Slider 为垂直方向Booleanfalse
tooltipPlacement设置 Tooltip 展示位置。参考 Tooltipstring
tooltipVisible值为true时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。Boolean
getTooltipPopupContainerTooltip 渲染父节点,默认渲染到 body 上。Function() => document.body

Events

事件名称说明回调参数
afterChangemouseup 触发时机一致,把当前值作为参数传入。Function(value)
change当 Slider 的值发生改变时,会触发 change 事件,并把改变后的值作为参数传入。Function(value)