# CheckboxGroup 复选按钮
## 基本用法
```html
v-model="group"
```
```javascript
data() {
return {
data:[
{id:11,value:'选项A',label:'选项A'},
{id:12,value:'选项B',label:'选项B'},
{id:13,value:'选项C',label:'选项C'},
{id:14,value:'选项D',label:'选项D'},
],
group: ['选项A'],
};
}
```
v-model绑定的数组选项对应data的value值，控制选项是否选中，如代码所示，‘选项A’被勾选。如果group为空那么所有选项未选中。
```html
v-model="group"
```
```javascript
data() {
return {
group: ['A'],
};
}
```
checkBoxData也可直接在标签中传入数据
## 禁用状态
data控制禁用状态
```html
```
```javascript
data() {
return {
data2:[
{id:21,value:'选项1',label:'选项1',disabled:true},
{id:22,value:'选项2',label:'选项2',disabled:true},
],
};
}
```
标签控制禁用状态(用于全组禁用)
```html
```
```javascript
data() {
return {
data2:[
{id:21,value:'选项1',label:'选项1'},
{id:22,value:'选项2',label:'选项2'},
],
};
}
```
## 自定义尺寸
内置 **small**，**base**，**large** 三种规格供使用。
```html
```
```javascript
data() {
return {
data1:[
{id:41,value:'备选项',label:'备选项'},
],
data2:[
{id:42,value:'备选项',label:'备选项'},
],
data3:[
{id:43,value:'备选项',label:'备选项',size:'large'},
],
};
}
```
也可用data控制size属性
```html
```
```javascript
data() {
return {
data:[
{id:41,value:'1',label:'选项1',size:'large'},
{id:42,value:'2',label:'选项2',size:'base'},
{id:43,value:'3',label:'选项3',size:'small'},
],
group:['1','2','3'],
};
}
```
**注意**：如果data中设置了size，显示data中size属性，data中的size属性优先级高于标签size的设置。
## 禁用动效
animation属性值为false时，禁用自带动效
```html
```
## 横向排列
vertical属性值为true时，横向排列
```html
```
## 事件
值发生变化时，将触发change事件
```html
```
```javascript
methods: {
changeEvt(val,label,e){
alert('已选值:['+ val+']，当前选择值：'+ label);
}
}
```
## 新增自定义class
```html
```
## Prop
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| checkBoxData | 传入选项数组 | Array | -
| v-model,value | 选择项数组，可定义默认选中项 | Array | -
| vertical | 横向排列 | Boolean | false
| size | 尺寸，可选值small/base/large | String | base
| disabled | 是否禁用 | Boolean | false
| animation | 是否需要动效 | Boolean | true
| customClass | 自定义样式 | String | -
## Event
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| change | 值变化时触发 | 当前已选中项的状态（values），当前选中项值（label），event