## Switch开关

### 基本用法

```html
<template>
  <el-form v-form>
    <cl-form-item label="权限">
      <el-radio-group v-model="permissionVal">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
      </el-radio-group>
    </cl-form-item>
    <cl-form-item label="默认">
      <cl-switch v-model="value1" :permission="permissionVal"></cl-switch>
    </cl-form-item>
    <cl-form-item label="设置颜色">
      <cl-switch
        :width="50"
        v-model="value2"
        :permission="permissionVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></cl-switch>
    </cl-form-item>
    <cl-form-item label="设置文字">
      <cl-switch
        v-model="value3"
        :permission="permissionVal"
        active-text="按月付费"
        inactive-text="按年付费"
      ></cl-switch>
    </cl-form-item>
    <cl-form-item label="设置值类型">
      <cl-switch
        v-model="value4"
        :permission="permissionVal"
        active-value="1"
        inactive-value="0"
      ></cl-switch>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        permissionVal: "w",
        value1: true,
        value2: true,
        value3: true,
        value4: "0",
      };
    },
  };
</script>

<!-- switch-1.vue -->
```

### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| value / v-model | 绑定值 | boolean / string / number | — | — |
| disabled  | 是否禁用    | boolean   | — | false   |
| width  | switch 的宽度（像素）    | number   | — | 40 |
| active-text  | switch 打开时的文字描述    | string   | — | — |
| inactive-text  | switch 关闭时的文字描述    | string   | — | — |
| active-value  | switch 打开时的值    | boolean / string / number | — | true |
| inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
| active-color  | switch 打开时的背景色    | string   | — | #409EFF |
| inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |

### Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| change  | switch 状态发生变化时的回调函数    | 新状态的值 |
