# Switch 开关

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-switch": "@vant/weapp/switch/index"
}
```

## 代码演示

### 基础用法

```html
<van-switch checked={ this.state.checked } onChange={(e)=>this.onChange(e) />
```

```javascript
import Dialog from "../../vant/dialog/dialog";

  state= {
    checked: true,
  },

   onChange({ detail }) {
     Dialog.confirm({
         title: '提示',
         message: '是否切换开关？'
       }).then((res) => {
         this.setState({ checked2: detail });
       });
   }

```

### 禁用状态

```html
<van-switch checked={ this.state.checked } disabled onChange={(e)=>this.onChange(e)/>
```

### 加载状态

```html
<van-switch checked={ this.state.checked } loading />
```

### 自定义大小

```html
<van-switch checked={ this.state.checked } size="24px" />
```

### 自定义颜色

```html
<van-switch
  checked={ this.state.checked }
  activeColor="#07c160"
  inactiveColor="#ee0a24"
/>
```

### 异步控制

```html
<van-switch checked={ this.state.checked } onChange={(e)=>this.onChange(e) />
```

```js

  state= {
    checked: true,
  }

  onChange({ detail }) {
    wx.showModal({
      title: '提示',
      content: '是否切换开关？',
      success: (res) => {
        if (res.confirm) {
          this.setData({ checked2: detail });
        }
      },
    });
  },

```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Props

| 参数           | 说明                   | 类型      | 默认值    | 版本 |
| -------------- | ---------------------- | --------- | --------- | ---- |
| name           | 在表单内提交时的标识符 | _string_  | -         | -    |
| checked        | 开关选中状态           | _any_     | `false`   | -    |
| loading        | 是否为加载状态         | _boolean_ | `false`   | -    |
| disabled       | 是否为禁用状态         | _boolean_ | `false`   | -    |
| size           | 开关尺寸               | _string_  | `30px`    | -    |
| active-color   | 打开时的背景色         | _string_  | `#1989fa` | -    |
| inactive-color | 关闭时的背景色         | _string_  | `#fff`    | -    |
| active-value   | 打开时的值             | _any_     | `true`    | -    |
| inactive-value | 关闭时的值             | _any_     | `false`   | -    |

### Events

| 事件名      | 说明             | 参数                       |
| ----------- | ---------------- | -------------------------- |
| bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |

### 外部样式类

| 类名         | 说明         |
| ------------ | ------------ |
| custom-class | 根节点样式类 |
| node-class   | 圆点样式类   |