Skip to content

Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

基础用法

文字描述

使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。

扩展的 value 类型

禁用状态

加载状态

属性

属性名说明类型可选值默认值
model-value / v-model绑定值,必须等于 active-valueinactive-value,默认为 Boolean 类型boolean / string / number
disabled是否禁用booleanfalse
loading是否显示加载中booleanfalse
widthswitch 的宽度number / string
inline-prompt无论图标或文本是否显示在点内,只会呈现文本的第一个字符booleanfalse
active-textswitch 打开时的文字描述string
inactive-textswitch 的状态为 off 时的文字描述string
active-valueswitch 状态为 on 时的值boolean / string / numbertrue
inactive-valueswitch的状态为 off 时的值boolean / string / numberfalse
active-color当在 on 状态时的背景颜色(已废弃,请使用 CSS var --van-switch-on-color )string
inactive-coloroff 状态时的背景颜色(已废弃,使用 CSS var --van-switch-of-color )string

事件

事件名说明回调参数
changeswitch 状态发生变化时的回调函数val,新状态的值

Released under the MIT License.