主题
Switch 开关
在开启和关闭两种状态之间切换，支持开关和复选框两种外观。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 开关状态变化时通知页面 -->
<fui-switch :checked="enabled" @change="handleChange" />change 返回的状态位于 event.detail.value，页面应在事件处理方法中同步 enabled。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| name | String | 表单中的开关名称 | - |
| checked | Boolean | 是否开启 | false |
| disabled | Boolean | 是否禁用 | false |
| type | String | 外观，可选 switch、checkbox | switch |
| color | String | 开启时颜色 | #465CFF |
| background | String | 关闭时背景色，nvue 不支持 | #fdfdfd |
| btnColor | String | 开启时圆形按钮颜色，switch 类型有效，nvue 不支持 | #fff |
| btnBgColor | String | 关闭时圆形按钮颜色，switch 类型有效，nvue 不支持 | #fff |
| borderColor | String | checkbox 类型的边框颜色 | #ccc |
| checkMarkColor | String | checkbox 类型的对勾颜色 | #fff |
| scaleRatio | Number / String | 缩放比例 | 1 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 切换时触发 | event.detail.value 为切换后的布尔值 |
插槽
| 插槽 | 说明 |
|---|---|
| default | switch 按钮内的自定义内容，nvue 不支持 |
平台说明
非 nvue 平台的主色可通过 --fui-color-primary 配置。