3.3 KiB
3.3 KiB
Slider 滑块
示例
尺寸
可选的尺寸 ui 属性值：s/m。
只读/禁用
设置 readonly 属性来使设置滑块只读，设置 disabled 属性来使设置滑块禁用。
步进
使用 step 属性来指定步进值，使点击调节按钮或按下 ▴、▾ 键时根据指定步进值来调整输入值。
范围
使用 max/min 属性来指定拖动范围两端的值。
次级条
使用 secondary-progress 属性来指定一个次级进度条。
定制内容
使用 thumb/tip 插槽来自定义滑块按钮、悬浮提示等内容。
API
属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
ui |
string= |
- | [^ui] |
value |
`* | Array<*>` | - |
secondary-progress |
`number | Array` | 0 |
min |
number |
0 |
value 经过 parse 函数处理后允许的最小值。 |
max |
number |
1 |
value 经过 parse 函数处理后允许的最大值。 |
step |
number |
0 |
value 经过 parse 函数处理后的步进值。 |
mark |
boolean |
false |
是否显示步进标记。 |
parse |
function |
val => val |
传入值处理函数。 |
format |
function |
val => val |
输出值处理函数。 |
^^^ui 预设样式。
+++枚举值
| 值 | 描述 |
|---|---|
s |
小尺寸样式。 |
m |
中尺寸样式。 |
| +++ | |
| ^^^ |
^^^value 值。
默认值类型为 number，经过 parse 函数处理后值大小范围应在 min 和 max 之间。
当值为 Array<number> 形式时，组件则渲染多个滑块与值一一对应。
:::tip
当提供 parse 和 format 时，值可以为任意类型，但 parse 需要把传入值解析为 number 类型并返回；format 需要把传出值格式化成原始形式。parse 和 format 的实现只需要处理单值，组件内部会给多值的每一项分别依次调用这两个函数。
:::
^^^
插槽
| 名称 | 描述 |
|---|---|
track |
滑轨。默认内容：横线。 |
tip-label |
浮动提示文本。默认内容：当前 value 值。 |
thumb |
[^scoped-slot-thumb] |
tip |
[^scoped-slot-tip] |
^^^scoped-slot-thumb 滑块。
默认内容：圆形按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
|---|---|---|
index |
number |
滑块索引。 |
focus |
boolean |
滑块是否聚焦。 |
hover |
boolean |
鼠标是否悬浮。 |
dragging |
boolean |
滑块是否正在被拖动。 |
| +++ | ||
| ^^^ |
^^^scoped-slot-tip 浮动提示。
默认内容：内容为 value 的 Tooltip 组件。
+++作用域参数
| 名称 | 类型 | 描述 |
|---|---|---|
target |
HTMLElement |
滑块元素。 |
open |
boolean |
是否存在激活的滑块。 |
active-index |
boolean |
激活的滑块索引。 |
| +++ | ||
| ^^^ |
事件
| 名称 | 描述 |
|---|---|
input |
[^event-input] |
^^^event-input
:::badges
v-model
:::
修改后触发，回调参数为 (value: *)。value 为改变后经 format 函数处理过的新值。
^^^