Switch 开关
表示两种相互对立的状态间的切换,多用于触发「开/关」。
基础用法
文字描述
使用active-text
属性与inactive-text
属性来设置开关的文字描述。 使用 inline-prompt
属性来控制文本是否显示在点内。
扩展的 value 类型
禁用状态
加载状态
属性
属性名 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model-value / v-model | 绑定值,必须等于 active-value 或 inactive-value ,默认为 Boolean 类型 | boolean / string / number | — | — |
disabled | 是否禁用 | boolean | — | false |
loading | 是否显示加载中 | boolean | — | false |
width | switch 的宽度 | number / string | — | — |
inline-prompt | 无论图标或文本是否显示在点内,只会呈现文本的第一个字符 | boolean | — | false |
active-text | switch 打开时的文字描述 | string | — | — |
inactive-text | switch 的状态为 off 时的文字描述 | string | — | — |
active-value | switch 状态为 on 时的值 | boolean / string / number | — | true |
inactive-value | switch的状态为 off 时的值 | boolean / string / number | — | false |
active-color | 当在 on 状态时的背景颜色(已废弃,请使用 CSS var --van-switch-on-color ) | string | — | — |
inactive-color | off 状态时的背景颜色(已废弃,使用 CSS var --van-switch-of-color ) | string | — | — |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | switch 状态发生变化时的回调函数 | val,新状态的值 |