# Switch 开关

### 引入

推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)

## 代码演示

### 基础用法

```html
<van-switch v-model="checked" @change="onChange" />
```

```javascript
export default {
  data() {
    return {
      checked: true
    }
  },
  methods: {
    onChange(value) {
      console.log('值改变了', this.checked, value)
    }
  }
}
```

### 禁用状态

```html
<van-switch v-model="checked" disabled />
```

### 加载状态

```html
<van-switch v-model="checked" loading />
```

### 自定义大小

```html
<van-switch v-model="checked" size="24px" />
```

### 自定义颜色

```html
<van-switch
  v-model="checked"
  active-color="#07c160"
  inactive-color="#ee0a24"
/>
```

### 异步控制

```html
<van-switch :value="checked" @input="onInput" />
```

```js
export default {
  data() {
    return {
      checked: true,
    }
  },

  methods: {
    onInput(value) {
      wx.showModal({
        title: '提示',
        content: '是否切换开关？',
        success: (res) => {
          if (res.confirm) {
            this.checked = value
          }
        },
      });
    },
  }
}
```

## API

### Props

| 参数           | 说明                   | 类型      | 默认值    | 版本 |
| -------------- | ---------------------- | --------- | --------- | ---- |
| name           | 在表单内提交时的标识符 | _string_  | -         | -    |
| value/v-model        | 开关选中状态           | _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

| 事件名      | 说明             | 参数                       |
| ----------- | ---------------- | -------------------------- |
| @input | 开关状态切换回调 | value: 是否选中开关 |
| @change | 开关状态切换回调 | value: 是否选中开关 |

### 外部样式类

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