## Switch 开关 ### 使用指南 ``` javascript import { Switch } from 'vant'; Vue.component(Switch.name, Switch); ``` ### 代码演示 #### 基础用法 :::demo 基础用法 ```html

``` ```javascript export default { data() { return { switchState1: true, switchState2: false }; }, methods: { updateState(newState) { const state = newState ? '打开' : '关闭'; Dialog.confirm({ title: '提醒', message: '是否' + state + '开关？' }).then((action) => { this.switchState2 = newState; }, (error) => { }); } } }; ``` ::: #### 禁用状态设置`disabled`属性为`true`，此时开关不可点击。 :::demo 禁用状态 ```html

打开

关闭

``` ```javascript export default { data() { return { switchStateTrue: true, switchStateFalse: false }; } }; ``` ::: #### loading状态设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。 :::demo loading状态 ```html

打开

关闭

``` ```javascript export default { data() { return { switchStateTrue: true, switchStateFalse: false }; } }; ``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | v-model | 开关状态 | `Boolean` | `false` | `true`, `false` | | loading | loading状态 | `Boolean` | `false` | `true`, `false` | | disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` | | onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |