title: 开关 Switch
开关 Switch
用于在打开和关闭状态之间进行切换。
基础案例
示例代码
<l-switch />
设置选中颜色及大小
可以通过 color
、select-color
设置关闭和打开后的颜色。
通过 size
属性设置 switch
组件的大小。
示例代码
<l-switch size="50rpx" color="#ccc" select-color="#34BFA3"/>
设置禁用
当我们需要禁用时只需要设置为 disabled
即可。
示例代码
<l-switch disabled />
自定义打开或关闭的值
我们可以通过 checked
属性设置开关的默认状态
默认关闭时值为 false
,打开时值为 true
,通过 active-value
和 inactive-value
可以改变它们的值。
示例代码
<l-switch checked="{{ customValue }}" active-value="{{ 1 }}" inactive-value="{{ 0 }}" bind:linchange="onChange"/>
开关组件属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
checked | 开关选中状态 | Boolean | —- | false |
size | 开关尺寸 | String | —- | 38rpx |
disabled | 是否为禁用状态 | Boolean | —- | false |
color | 关闭时的背景色 | String | —- | #FFF |
select-color | 打开时的背景色 | String | —- | #3963BC |
active-value | 打开时的值 | Any | —- | true |
inactive-value | 关闭时的值 | Any | —- | false |
开关组件外部样式类
外部样式类名 | 说明 | 备注 |
---|---|---|
l-class | 设置 switch 的外部样式类 | —- |
l-disabled-class | 设置 switch 禁用时的外部样式类 | —- |
单项选择器事件
事件名称 | 说明 | 返回值 | 备注 |
---|---|---|---|
bind:linchange | 切换 switch 时触发 | 选中项发生变化时触发 linchange 事件,event.detail = { value } |
- |