Slider 滑块
该组件是低代码平台中用于通过拖拽方式选择数值或数值范围的表单项,基于 Element Plus 的 <el-slider> 封装,支持单值/范围选择、步长控制、标记点、垂直布局及自定义提示格式,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
最小值 min | number | 滑块可选范围的起始值(默认 0) |
最大值 max | number | 滑块可选范围的结束值(默认 100) |
步长 step | number | 每次拖动或点击的增量(默认 1) |
是否开启范围选择 range | boolean | 启用后可选择一个区间(如 [20, 80]) |
是否显示输入框 showInput | boolean | 在滑块旁显示数值输入框(仅单值模式有效) |
是否显示输入框控制按钮 showInputControls | boolean | 在输入框右侧显示增减按钮(需同时启用 showInput,默认开启) |
是否显示间断点 showStops | boolean | 在轨道上显示步长对应的刻度点 |
是否显示提示信息 showTooltip | boolean | 拖动时显示当前值的 Tooltip(默认开启) |
格式化提示信息 formatTooltip | string | 自定义 Tooltip 显示内容,使用 ${data} 占位符代表当前数值(如 "${data}%") |
是否垂直模式 vertical | boolean | 滑块纵向排列 |
滑块高度 height | string | 垂直模式下必须设置高度(支持 CSS 单位,如 200px、10rem) |
获取标记样式函数 marks | function | 返回 { [key: number]: { style?: object, label?: string } },用于在指定数值位置添加带样式的标记(key 必须在 [min, max] 范围内) |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
📌 标记示例:
jsreturn { 25: { label: '偏低' }, 50: { style: { color: 'red' }, label: '中值' }, 75: { label: '偏高' } }
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 滑块值确认后发生变化时 | 返回当前值(单值为 number,范围为 [number, number]) |
