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 不依赖全局主题,可任意指定颜色)

18. 自动化断言