## 复选框

### 基础用法
绑定`v-model`值，传入`options`选项

```html
<template>
  <cl-checkbox v-model="checkVal" :options="options"></cl-checkbox>
  <div class="flex-line">
    <label>绑定的值展示</label>
    <cl-input v-model="checkVal" readonly/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        checkVal: "",
        options: [
          {value:'复选框A', key: 'A'},
          {value:'复选框B', key: 'B'},
          {value:'单个禁用', key: 'disabled',disabled: true}
        ]
      }
    }
  }
</script>
<style>
  .flex-line{
    margin-top: 20px;
  }
  .flex-line label{
    margin-right: 20px;
  }
</style>
<!-- checkbox-1.vue -->
```

### 动态选项

```html
<template>
  <cl-checkbox
    v-model="checkVal"
    :ganged="{
      alias: 'xxlb',
      valueBind: 'ID_',
      noInit: '',
      labelBind: 'NAME_',
      PId: '',
      gangedBind: '{}',
      bind: {},
    }"
  ></cl-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checkVal: "",
      };
    },
  };
</script>

<!-- checkbox-dynamic.vue -->
```


### 权限
添加`permission`属性可传入校验规则，共有四种状态，无权限、只读、编辑、必填。
```html
<template>
  <div class="main-content">
     <div class="flex-line">
        <label>权限控制</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> 
      </div>
      <div class="flex-line">
        <label>复选框</label>
        <cl-checkbox v-model="checkVal" :permission="permissionVal" :options="options"/>
      </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        permissionVal: "w",
        checkVal: "",
        options: [
          {value:'复选框A', key: 'A'},
          {value:'复选框B', key: 'B'},
          {value:'复选框C', key: 'C'}
        ]
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- checkbox-2.vue -->
```
### 布局展示
添加`option-layout`属性可修改选项布局，有横向布局(horizontal)和纵向布局(vertical)，默认为横向布局。
```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>纵向布局</label>
      <cl-checkbox v-model="checkVal" option-layout="vertical" :options="options"/>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        checkVal: "",
        options: [
          {value:'复选框A', key: 'A'},
          {value:'复选框B', key: 'B'},
          {value:'复选框C', key: 'C'}
        ]
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 100px;
    text-align: right;
    margin-right: 20px;
  }

</style>
<!-- checkbox-3.vue -->
```
### 禁用
添加`disabled`或`readonly`都可实现禁用。
```html
<template>
  <cl-checkbox v-model="checkVal" disabled :options="options"/>
  <cl-checkbox v-model="checkVal" readonly :options="options"/>
</template>
<script>
  export default {
    data () {
      return {
        checkVal: "A",
        options: [
          {value:'复选框A', key: 'A'},
          {value:'复选框B', key: 'B'},
          {value:'复选框C', key: 'C'}
        ]
      }
    }
  }
</script>
<!-- checkbox-4.vue -->
```
### 可选项目数量的限制
使用 `min` 和 `max` 属性能够限制可以被勾选的项目的数量。
```html
<template>
  <cl-checkbox v-model="checkVal" :min="1" :max="3" :options="options"/>
</template>
<script>
  export default {
    data () {
      return {
        checkVal: "A,B",
        options: [
          {value:'复选框A', key: 'A'},
          {value:'复选框B', key: 'B'},
          {value:'复选框C', key: 'C'},
          {value:'复选框D', key: 'D'},
        ]
      }
    }
  }
</script>
<!-- checkbox-5.vue -->
```

### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| v-model | string/number | - | 绑定值 |
|cklist| string |—|  传入的选项，为JSON格式的字符串，优先级高于`options` |
|options| array |—|  传入的选项，为JSON格式的数组对象，优先级低于`cklist` |
| validate | string / object | - | 校验规则 |
| permission | string | w | 这个单行文本实现了控件的无权限(n)、只读(r)、编辑(w)、必填(b)权限，而且权限在变更后对输入框的影响会立即生效。 |
| option-layout | string| horizontal | 复选框水平显示还是垂直显示，可选值horizontal，vertical |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 是否只读 |
| max | number | - | 可被勾选的 checkbox 的最大数量 |
| min | number | - | 可被勾选的 checkbox 的最小数量 |
| linkage | Object / array | - | 联动 |
| ganged | Object | - | 动态选项 |
