搜索组件...⌘K

Switch 开关

用于两个互斥选项，用来打开或关闭选项的选择，支持自定义颜色、加载状态和异步切换。

基础用法

通过 v-model 绑定布尔值：

开启

不同尺寸

设置 size 为 sm / md / lg：

带文字

通过 checked-text 和 unchecked-text 显示开关文字：

自定义颜色

通过 checked-color 和 unchecked-color 自定义开关颜色：

加载状态

设置 loading 显示加载动画，加载期间不可切换：

异步切换

设置 beforeChange 函数，返回 false 可阻止切换：

切换前会延迟 1 秒并弹窗确认

禁用状态

设置 disabled 禁用开关：

Props

参数	类型	默认值	说明
`modelValue`	`boolean`	`-`	开关状态（v-model），必填
`disabled`	`boolean`	`false`	是否禁用
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`checkedText`	`string`	`-`	开启时显示的文字
`uncheckedText`	`string`	`-`	关闭时显示的文字
`checkedColor`	`string`	`-`	开启时背景色
`uncheckedColor`	`string`	`-`	关闭时背景色
`loading`	`boolean`	`false`	是否加载中
`beforeChange`	`(val: boolean) => boolean \| Promise<boolean>`	`-`	切换前回调，返回 false 阻止切换

Events

事件名	类型	说明
`update:modelValue`	`(val: boolean) => void`	开关状态变化时触发
`change`	`(val: boolean) => void`	开关状态变化时触发