Switch 开关
开关选择器。
何时使用
- 需要表示开关状态/两种状态之间的切换时。
- 与 Checkbox 的区别：切换 Switch 会直接触发状态改变。
基本使用
最简形式，绑 v-model。
内嵌文字
checked-children / unchecked-children 在开关内部显示文字。
尺寸
禁用 / 加载
自定义开关值
checkedValue / uncheckedValue 改变开关绑定值，常用于 'on' / 'off'、1 / 0 这类二元枚举。
监听 change 事件
change 在状态改变时触发，回调里可发请求、做联动等。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | boolean | string | number | false | v-model 绑定值 |
| checkedValue | boolean | string | number | true | 选中时的值 |
| uncheckedValue | boolean | string | number | false | 未选中时的值 |
| disabled | boolean | false | 禁用 |
| loading | boolean | false | 加载状态 |
| size | 'default' | 'small' | 'default' | 大小 |
| checkedChildren | string | -- | 选中时显示的内容 |
| uncheckedChildren | string | -- | 未选中时显示的内容 |
| autofocus | boolean | false | 自动聚焦 |
Events
| 事件名 | 回调签名 | 触发时机 |
|---|---|---|
| change | (value, e: MouseEvent) | 状态改变时触发 |
| click | (e: MouseEvent) | 点击时触发 |