Switch 开关
Switch 开关选择器,原生组件增强。
# 支持平台
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 代码演示
部分示例演示,完整使用请参考文档API。
# 基础使用
通过 change 事件获取打开关闭状态。
<wui-switch @change="change"></wui-switch>
# 默认打开
通过 checked 属性设置是否默认打开。
<wui-switch checked></wui-switch>
# 改变大小、颜色
通过 scaleRatio 属性来缩放组件大小,color 属性修改打开后颜色。
<wui-switch :scaleRatio="0.8" color="#FFB703"></wui-switch>
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| name | String | 开关选择器名称 | - | - |
| checked | Boolean | 是否打开 | false | - |
| disabled | Boolean | 是否禁用 | false | - |
| type | String | 开关显示样式,有效值:switch, checkbox | switch | - |
| color | String | 开关打开时颜色 | #465CFF | 非Nvue端默认为空,可以通过css变量(--wui-color-primary)修改默认颜色值 |
| borderColor | String | 边框颜色,type=checkbox时生效 | #ccc | - |
| checkMarkColor | String | 对号颜色,type=checkbox时生效 | #fff | - |
| scaleRatio | Number, String | 缩放比例 | 1 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 开关切换状态时触发 | event.detail={ value:是否checked } |