开关 Switch
基本用法
自定义颜色
在不同状态下显示的文本
可以用图标代替文本
可以绑定多种类型的值(string、boolean、number)
API
Switch 参数
参数名 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
---|---|---|---|---|---|
modelValue | v-model | boolean/string/number | true | true | |
disabled | 是否禁用 | boolean | false | ||
loading | 是否加载中 | boolean | false | ||
width | 开关的宽度(px) | number | 35 | ||
activeIcon | 开启状态下的图标(会覆盖 activeLabel) | string | |||
inactiveIcon | 关闭状态下的图标(会覆盖 inactiveLabel) | string | |||
activeValue | 开启状态下的值 | boolean/string/number | true | ||
inactiveValue | 关闭状态下的值 | boolean/string/number | false | ||
activeLabel | 开启状态下的文本 | string | |||
inactiveLabel | 关闭状态下的文本 | string | |||
activeColor | 开启状态下的颜色(必须为 16 进制格式) | string | #63B931 | ||
inactiveColor | 关闭状态下的颜色(必须为 16 进制格式) | string | #C91B26 |
Switch 事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | 值发生变化时触发 | (v : activeValue/inactiveValue) => void |