Switch 开关

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

基本用法

Switch 开关 - 图1

扩展的 value 类型

Switch 开关 - 图2

禁用状态

Switch 开关 - 图3

焦点

Switch 开关 - 图4

Attributes

参数说明类型可选值默认值
disabled是否禁用booleanfalse
widthswitch 的宽度(像素)number58(有文字)/ 46(无文字)
onIconClassswitch 打开时所显示图标的类名,设置此项会忽略 onTextstring
offIconClassswitch 关闭时所显示图标的类名,设置此项会忽略 offTextstring
onTextswitch 打开时的文字stringON
offTextswitch 关闭时的文字stringOFF
onValueswitch 打开时的值boolean / string / numbertrue
offValueswitch 关闭时的值boolean / string / numberfalse
onColorswitch 打开时的背景色string#20A0FF
offColorswitch 关闭时的背景色string#C0CCDA
nameswitch 对应的 name 属性string
allowFocus允许 switch 触发 focus 和 blur 事件booleanboolean

Events

事件名称说明回调参数
onChangeswitch 状态发生变化时的回调函数value
onBlurswitch 失去焦点时触发,仅当 allow-focus 为 true 时生效event: Event
onFocusswitch 获得焦点时触发,仅当 allow-focus 为 true 时生效event: Event