HTSwitcher 自定义开关切换器
用于在两种状态之间进行切换，支持图标或文字展示，自适应宽度与动画过渡，适合用于状态切换、过滤器等场景。
基本用法
自定义图标和宽度示例
自适应布局示例
HTSwitcher Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
value / v-model | 是否选中 | boolean | true / false | false |
active-content | 选中时的文本内容 | string | — | 'Active' |
inactive-content | 未选中时的文本内容 | string | — | 'Inactive' |
active-icon | 选中时的图标名（用于 HTIcon） | string | — | '' |
inactive-icon | 未选中时的图标名（用于 HTIcon） | string | — | '' |
icon-size | 图标大小 | string | — | '16px' |
icon-type | 图标类型（传给 HTIcon 的 type） | string | el / ap / custom等 | 'el' |
item-width | 每个选项的宽度（单位 px） | number | — | 0（自动） |
adaptive | 是否自适应宽度（平分容器） | boolean | true / false | false |
HTSwitcher Events
| 事件名 | 说明 | 回调参数 |
|---|
input | 值改变时触发（v-model） | value: boolean |
change | 状态变更时触发 | value: boolean |
插槽 Slots
| 插槽名 | 说明 |
|---|
active-content | 自定义选中状态下的内容（替代文本或图标） |
inactive-content | 自定义未选中状态下的内容 |
注意事项
adaptive 模式下会自动计算宽度并平分容器宽度；- 如果同时设置了
adaptive 和 item-width，则优先采用 adaptive 逻辑； - 内部使用了
ResizeObserver 和监听容器宽度，请确保浏览器兼容； - 支持 RTL 布局自动处理（需启用 RTL 环境）；