Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基础用法
绑定 v-model 到一个 Boolean 类型的变量。可以使用 --vk-switch-on-color 属性与 --vk-switch-off-color 属性来设置开关的背景色。
受控和非受控模式
VkSwitch 组件支持两种使用模式：非受控模式（使用 v-model）和受控模式（使用 :value + 事件）。
非受控模式
使用 v-model 进行双向数据绑定，组件内部管理状态。
当前值: false
受控模式
使用 :value 单向绑定配合 @change 或 @update:modelValue 事件，由父组件完全控制状态。
当前值: false
当前值: false
尺寸
使用 size 属性改变开关大小。
文字描述
使用 active-text 属性与 inactive-text 属性来设置开关的文字描述。使用 inline-prompt 属性来控制文本是否显示在点内。
按年支付按月支付
按年支付按月支付
Y
是
显示自定义图标
使用 inactive-icon 和 active-icon 属性来添加图标。使用 inline-prompt 属性来控制图标显示在点内。
扩展的 value 类型
设置 active-value 和 inactive-value 属性，接受 Boolean、String 或 Number 类型的值。
禁用状态
设置 disabled 属性，接受一个 Boolean，设置 true 即可禁用。
加载状态
设置 loading 属性，接受一个 Boolean，设置 true 即可加载中状态。
阻止切换
设置 beforeChange 属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。
API
Switch Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'medium' | 开关大小 |
| disabled | boolean | false | 是否禁用 |
| loading | boolean | false | 是否显示加载中 |
| activeValue | boolean | string | number | true | switch 打开时的值 |
| inactiveValue | boolean | string | number | false | switch 关闭时的值 |
| activeText | string | — | switch 打开时的文字描述 |
| inactiveText | string | — | switch 关闭时的文字描述 |
| activeIcon | string | — | switch 打开时所显示图标，支持 Iconify 图标名称（如 mdi:check）、图片 URL 或本地图片路径，设置此项会忽略 active-text |
| inactiveIcon | string | — | switch 关闭时所显示图标，支持 Iconify 图标名称（如 mdi:close）、图片 URL 或本地图片路径，设置此项会忽略 inactive-text |
| inlinePrompt | boolean | false | 无论图标或文本是否显示在点内，只会呈现文本的第一个字符 |
| beforeChange | () => boolean | Promise<boolean> | — | switch 状态改变前的钩子，返回 false 或者返回 Promise 且被 reject 则停止切换 |
| customClass | string | — | 自定义类名 |
| customStyle | string | object | — | 自定义样式 |
Switch Events
| 名称 | 参数 | 说明 |
|---|---|---|
| change | (value: SwitchValue) => void | 当绑定值变化时触发 |
Switch Methods
| 名称 | 说明 |
|---|---|
| focus | 使开关获取焦点 |
| blur | 使开关失去焦点 |