SepSegmented 分段控制器组件 v1.0.0
多选项互斥切换 · options 数据驱动 · value/defaultValue 受控与非受控 · size 尺寸 · shape 形状(default|round) · block 撑满 · disabled 整体禁用 · motion 滑块动画 · 键盘导航(←→) · icon 图标支持
1. 基础用法
HTML 声明式标签
JS API 初始化
当前值:
day
2. size 尺寸(small / middle / large)
HTML 声明式标签
JS API 初始化
3. shape 形状(default / round)
HTML 声明式标签
JS API 初始化
4. block 撑满父容器
HTML 声明式标签
JS API 初始化
5. 禁用状态(整体禁用 / 单项禁用)
HTML 声明式标签
JS API 初始化
6. 图标支持(icon + label / 纯图标)
HTML 声明式标签
JS API 初始化
7. motion 滑块动画(开 / 关)
HTML 声明式标签
JS API 初始化
8. 受控模式 value
HTML 声明式标签(value 受控,需配合 onChange 外部更新)
JS API 初始化(点击切换,外部值同步更新)
外部受控值:
board
9. API 交互测试
JS API 初始化
当前值:
list
getState:
10. beforeChange 切换前钩子(返回 false 阻止切换)
JS API 初始化
提示:切换到「归档」会被阻止,其余可正常切换
11. renderLabel 自定义渲染(option, selected)
JS API 初始化
12. tooltip 提示 & badge 徽标
JS API 初始化
13. orientation 水平 / 垂直方向(horizontal / vertical)
水平方向(horizontal,默认)
垂直方向(vertical)
14. clearable 可清空(点击已选中项取消)
JS API 初始化
当前值:
list
15. beforeChange 异步钩子(支持 Promise)
JS API 初始化
提示:切换到「归档」会异步确认(800ms)后阻止
16. tooltip placement 方向配置
JS API 初始化(tooltip 支持 string 或 {title, placement})
17. color 实例级主题色
JS API 初始化(color 不依赖全局主题,可任意指定颜色)