开关 Switch
开关的基本用法。
设置 beforeChange 函数，函数的返回值将用于判断是否阻止切换。
自动 loading
Section titled “自动 loading”设置 auto-loading 后，开关会在触发切换后自动进入加载中状态，并在外部 v-model 值回写后结束。
自定义开关的颜色
Section titled “自定义开关的颜色”通过 checked-color 和 unchecked-color 可以自定义开关的颜色。
禁用开关。
自定义开关按钮上显示的图标。
通过设置 loading 使开关处于加载中状态，此时开关不可点击。
开关分为 small、medium 两种尺寸。
自定义开关的打开/关闭状态的文字。
开关分为 circle - 圆形（默认）、round - 圆角、line - 线性三种类型。
自定义开关的值
Section titled “自定义开关的值”通过 checked-value 和 unchecked-value 可以自定义开关的值。
<switch> Props
Section titled “<switch> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| model-value (v-model) | 绑定值 | string|number|boolean |
- |
|
| default-checked | 默认选中状态（非受控状态） | boolean |
false |
|
| disabled | 是否禁用 | boolean |
false |
|
| loading | 是否为加载中状态 | boolean |
false |
|
| auto-loading | 是否在切换后自动进入加载中状态，并在外部 v-model 回写后结束 |
boolean |
false |
|
| type | 开关的类型 | 'circle' | 'round' | 'line' |
'circle' |
|
| size | 开关的大小 | 'small' | 'medium' |
'medium' |
|
| checked-value | 选中时的值 | string|number|boolean |
true |
2.12.0 |
| unchecked-value | 未选中时的值 | string|number|boolean |
false |
2.12.0 |
| checked-color | 选中时的开关颜色 | string |
- |
2.12.0 |
| unchecked-color | 未选中时的开关颜色 | string |
- |
2.12.0 |
| before-change | switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。 | ( newValue: string | number | boolean) => Promise<boolean | void> | boolean | void |
- |
2.37.0 |
| checked-text | 打开状态时的文案（type='line'和size='small'时不生效） |
string |
- |
2.45.0 |
| unchecked-text | 关闭状态时的文案（type='line'和size='small'时不生效） |
string |
- |
2.45.0 |
<switch> Events
Section titled “<switch> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 值改变时触发 | value: boolean | string | numberev: Event |
| focus | 组件获得焦点时触发 | ev: FocusEvent |
| blur | 组件失去焦点时触发 | ev: FocusEvent |
<switch> Slots
Section titled “<switch> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| checked-icon | 打开状态时，按钮上的图标 | - |
| unchecked-icon | 关闭状态时，按钮上的图标 | - |
| checked | 打开状态时的文案（type='line'和size='small'时不生效） |
- |
| unchecked | 关闭状态时的文案（type='line'和size='small'时不生效） |
- |