开关 Switch
这个组件叫做 Switch，听起来就像某款游戏机一样，好想玩......
基础使用
传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。
隐藏源代码
只读 & 禁用
readonly 设置只读，disabled 设置禁用，此时内部 <input> 都会被设置 disabled。它们之间几乎只有样式不一样。
Disabled:
Readonly:
隐藏源代码
加载状态
loading 设置加载状态，会展示加载图标。
隐藏源代码
提示信息
activeTip、inactiveTip 设置组件内部的文本提示，activeLabel、inactiveLabel 设置组件两侧的文本提示，也支持插槽的形式：active-tip、inactive-tip、active-label、inactive-label。
active-icon 和 inactive-icon 设置开关的图标。
隐藏源代码
背景颜色
通过 activeColor、inactiveColor 设置背景颜色。
隐藏源代码
开关尺寸
size 属性设置开关的尺寸。
隐藏源代码
开关形状
开关有 'round' 和 'rect' 两种形状，通过 shape 设置。
隐藏源代码
API
SwitchProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| modelValue | boolean | null | 是 | undefined | 开关的值（受控模式），支持 v-model。 | 0.0.3 |
| defaultValue | boolean | null | 是 | undefined | 开关的默认值（非受控模式）。 | 0.0.3 |
| shape | 'round' | 'rect' | 是 | 'round' | 开关的形状。 | 0.0.3 |
| size | 'small' | 'medium' | 'large' | 是 | 'medium' | 开关的尺寸。 | 0.0.3 |
| readonly | boolean | 是 | false | 是否只读。 | 0.0.3 |
| disabled | boolean | 是 | false | 是否禁用。 | 0.0.3 |
| loading | boolean | 是 | false | 是否为加载状态。 | 0.0.3 |
| activeTip | string | 是 | | 选中时的文本提示，位于开关内侧。 | 0.0.3 |
| inactiveTip | string | 是 | | 未选中时的文本提示，位于开关内侧。 | 0.0.3 |
| activeLabel | string | 是 | | 选中时的文本标签，位于开关外侧。 | 0.0.3 |
| inactiveLabel | string | 是 | | 未选中时的文本标签，位于开关外侧。 | 0.0.3 |
| activeColor | string | 是 | | 选中时标签颜色，详见 支持的颜色解析。 | 0.0.3 |
| inactiveColor | string | 是 | | 未选中时标签颜色，详见 支持的颜色解析。 | 0.0.3 |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，可能会影响性能。 | 0.1.0 |
SwitchEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:modelValue | value: boolean | 更新 modelValue 的回调。 | 0.0.3 |
| input | value: boolean, event: InputEvent | 触发开关的回调。 | 0.0.3 |
| change | value: boolean, event: Event | 开关选中状态改变的回调。 | 0.0.3 |
| focus | event: FocusEvent | 聚焦开关的回调。 | 0.0.3 |
| blur | event: FocusEvent | 开关失焦的回调。 | 0.0.3 |
SwitchSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| active-tip | | 选中时的提示，位于开关内侧。 | 0.0.3 |
| inactive-tip | | 未选中时的提示，位于开关内侧。 | 0.0.3 |
| active-label | | 选中时的文本标签，位于开关外侧。 | 0.0.3 |
| inactive-label | | 未选中时的文本标签，位于开关外侧。 | 0.0.3 |
| active-icon | | 选中时的图标。 | 0.0.3 |
| inactive-icon | | 未选中时的图标。 | 0.0.3 |