Skip to content

Switch 开关

用于在两种状态间进行切换,支持布尔与自定义值、不同尺寸、文案与颜色、自定义宽度、禁用与加载态。

基础用法

使用 v-model 双向绑定值,默认值为 false/true

文案标签

通过 activeTextinactiveText 显示不同状态的文案。

尺寸

通过 size 调整尺寸:largedefaultsmall

颜色与宽度

使用 activeColorinactiveColor 自定义不同状态颜色;用 width 设置轨道宽度(单位 px)。

自定义值

通过 activeValueinactiveValue 将值映射为任意类型(boolean | string | number)。

禁用与加载

禁用态不可交互;加载态显示动画并不可交互。

Props

属性名说明类型可选值默认值
modelValue绑定值(支持布尔与自定义值)boolean | string | numberfalse
activeValue激活时的值boolean | string | numbertrue
inactiveValue未激活时的值boolean | string | numberfalse
activeColor激活状态颜色string''
inactiveColor未激活状态颜色string''
activeText激活状态文案string''
inactiveText未激活状态文案string''
size尺寸'large' | 'default' | 'small'large/default/smalldefault
disabled是否禁用booleanfalse
loading是否展示加载状态booleanfalse
width轨道宽度(px)number40

Events

事件名说明参数类型
update:modelValue值变化(v-model)boolean | string | number
change值变化(同上,便于监听)boolean | string | number