CheckboxGroup 复选按钮请使用手机扫码体验

基本用法

  1. html
    <nut-checkboxgroup  
  2.     :checkBoxData="data">
  3.     v-model="group"
  4. </nut-checkboxgroup>
  1. javascript
     data() {
  2.     return {
  3.         data:[
  4.             {id:11,value:'选项A',label:'选项A'},
  5.             {id:12,value:'选项B',label:'选项B'},
  6.             {id:13,value:'选项C',label:'选项C'},
  7.             {id:14,value:'选项D',label:'选项D'},
  8.         ],
  9.         group: ['选项A'],
  10.     };
  11. }

v-model绑定的数组选项对应data的value值，控制选项是否选中，如代码所示，‘选项A’被勾选。如果group为空那么所有选项未选中。

  1. html
    <nut-checkboxgroup  
  2.     :checkBoxData="['A','B','C','D']">
  3.     v-model="group"
  4. </nut-checkboxgroup>
  1. javascript
     data() {
  2.     return {
  3.         group: ['A'],
  4.     };
  5. }

checkBoxData也可直接在标签中传入数据

禁用状态

data控制禁用状态

  1. html
    <nut-checkboxgroup  
  2.     :checkBoxData="data2">
  3. </nut-checkboxgroup>
  1. javascript
    data() {
  2.     return {
  3.          data2:[
  4.             {id:21,value:'选项1',label:'选项1',disabled:true},
  5.             {id:22,value:'选项2',label:'选项2',disabled:true},
  7.         ],
  8.     };
  9. }

标签控制禁用状态(用于全组禁用)

  1. html
    <nut-checkboxgroup  
  2.     :checkBoxData="data2"
  3.     disabled>
  4. </nut-checkboxgroup>
  1. javascript
    data() {
  2.     return {
  3.          data2:[
  4.                {id:21,value:'选项1',label:'选项1'},
  5.             {id:22,value:'选项2',label:'选项2'},
  6.         ],
  7.     };
  8. }

自定义尺寸

内置 small，base，large 三种规格供使用。

  1. html
    <nut-checkboxgroup  
  2.     :size="'small'" 
  3.     :checkBoxData="data1" >
  4. </nut-checkboxgroup>
  6. <nut-checkboxgroup  
  7.     :size="'base'" 
  8.     :checkBoxData="data2" >
  9. </nut-checkboxgroup>
  11. <nut-checkboxgroup  
  12.     :size="'small'" 
  13.     :checkBoxData="data3" >
  14. </nut-checkboxgroup>
  1. javascript
    data() {
  2.     return {
  3.         data1:[
  4.             {id:41,value:'备选项',label:'备选项'},
  5.         ],
  6.         data2:[
  7.             {id:42,value:'备选项',label:'备选项'},
  8.         ],
  9.         data3:[
  10.             {id:43,value:'备选项',label:'备选项',size:'large'},
  11.         ],
  12.     };
  13. }

也可用data控制size属性

  1. html
  2. <nut-checkboxgroup  
  3.     :checkBoxData="data" v-model="group">
  4. </nut-checkboxgroup>
  1. javascript
    data() {
  2.     return {
  3.         data:[
  4.             {id:41,value:'1',label:'选项1',size:'large'},
  5.             {id:42,value:'2',label:'选项2',size:'base'},
  6.             {id:43,value:'3',label:'选项3',size:'small'},
  7.         ],
  8.         group:['1','2','3'],
  9.     };
  10. }

注意：如果data中设置了size，显示data中size属性，data中的size属性优先级高于标签size的设置。

禁用动效

animation属性值为false时，禁用自带动效

  1. html
    <nut-checkboxgroup  
  2.     :checkBoxData="data"
  3.     v-model="group"  
  4.     :animation="false" >
  5. </nut-checkboxgroup>

横向排列

vertical属性值为true时，横向排列

  1. html
    <nut-checkboxgroup   
  2.     :checkBoxData="data" 
  3.     v-model="group"
  4.     :vertical="true">
  5. </nut-checkboxgroup>

事件

值发生变化时，将触发change事件

  1. html
    <nut-checkboxgroup 
  2.     :checkBoxData="data5"
  3.     v-model="group"  
  4.     @change="changeEvt">
  5. </nut-checkboxgroup>
  1. javascript
    methods: {
  2.     changeEvt(val,label,e){
  3.         alert('已选值:['+ val+']，当前选择值：'+ label);
  4.     }  
  5. }

新增自定义class

  1. html
    <nut-checkboxgroup  
  2.     :customClass="'my-checkbox'" 
  3.     v-model="group" 
  4.     :checkBoxData="data6" >
  5. </nut-checkboxgroup>

Prop

字段说明类型默认值
checkBoxData传入选项数组Array-
v-model,value选择项数组，可定义默认选中项Array-
vertical横向排列Booleanfalse
size尺寸，可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animation是否需要动效Booleantrue
customClass自定义样式String-

Event

字段说明回调参数
change值变化时触发当前已选中项的状态（values），当前选中项值（label），event