# Switch 开关
开关选择器。

## 何时使用
- 表示两种状态之间的切换。
- 和`checkbox`的区别是，切换`switch`会直接触发状态改变，而`checkbox`一般用于状态标记，需要和提交操作配合。

### 基本使用

使用`on-value`和`off-value`属性设置选中和未选中的值。

@[demo](./demo/basic.vue)


### 加载状态

使用`loading`属性或`beforeChange`返回`Promise`设置加载中状态。

@[demo](./demo/loading.vue)

### 状态控制

- 设置`disabled`为`true`禁用switch；
- 设置`loading`为`true`使用switch进行loading状态

@[demo](./demo/status.vue)

### 异步控制状态

- 在状态改变前，可通过使用 `beforeChange` 方法进行异步操作
- 当 `beforeChange` 方法中返回值为
    + `Promise` 时
        - `resolve(bool)` 状态变更为`bool`，不传bool则改变状态
        - `reject()` 维持原状态
    + 非 `Promise` 时
        - 改变状态

@[demo](demo/before-change.vue)

## Switch props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| offValue | 假值 | - | false | - |
| onValue | 真值 | - | true |  |
| disabled | 是否禁用 | Boolean | false | - |
| icon | 圆点内的小图标 | String | - | - |
| iconProps | 圆点内小图标的属性，参考`icon`组件的props | Object | - | - |
| mini | 是否缩小显示为mini版 | Boolean | false | true |
| loading | 是否为加载中状态 | Boolean | false | true |
| beforeChange | 状态改变前执行的方法 | (checked: boolean) => Promise \| void | - | - |

## Switch slots

| name       | 说明             | slot-scope |
| ---------- | ---------------- | --------- |
| checked    | 开启时左侧显示的内容 | - |
| unchecked  | 未开启时右侧显示的内容 | - |
| hint | 开关右侧提示文案（可配合`beforeChang`方法使用） | { checked: boolean, loading: boolean } |