Appearance
Switch 开关
用于在两种状态间进行切换,支持布尔与自定义值、不同尺寸、文案与颜色、自定义宽度、禁用与加载态。
基础用法
使用 v-model 双向绑定值,默认值为 false/true。
文案标签
通过 activeText 与 inactiveText 显示不同状态的文案。
尺寸
通过 size 调整尺寸:large、default、small。
颜色与宽度
使用 activeColor 与 inactiveColor 自定义不同状态颜色;用 width 设置轨道宽度(单位 px)。
自定义值
通过 activeValue 与 inactiveValue 将值映射为任意类型(boolean | string | number)。
禁用与加载
禁用态不可交互;加载态显示动画并不可交互。
Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| modelValue | 绑定值(支持布尔与自定义值) | boolean | string | number | — | false |
| activeValue | 激活时的值 | boolean | string | number | — | true |
| inactiveValue | 未激活时的值 | boolean | string | number | — | false |
| activeColor | 激活状态颜色 | string | — | '' |
| inactiveColor | 未激活状态颜色 | string | — | '' |
| activeText | 激活状态文案 | string | — | '' |
| inactiveText | 未激活状态文案 | string | — | '' |
| size | 尺寸 | 'large' | 'default' | 'small' | large/default/small | default |
| disabled | 是否禁用 | boolean | — | false |
| loading | 是否展示加载状态 | boolean | — | false |
| width | 轨道宽度(px) | number | — | 40 |
Events
| 事件名 | 说明 | 参数类型 |
|---|---|---|
| update:modelValue | 值变化(v-model) | boolean | string | number |
| change | 值变化(同上,便于监听) | boolean | string | number |