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},
  6. ],
  7. };
  8. }

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

  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. }

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. html
    <nut-checkboxgroup
  2. :size="'small'"
  3. :checkBoxData="data1" >
  4. </nut-checkboxgroup>
  5. <nut-checkboxgroup
  6. :size="'base'"
  7. :checkBoxData="data2" >
  8. </nut-checkboxgroup>
  9. <nut-checkboxgroup
  10. :size="'small'"
  11. :checkBoxData="data3" >
  12. </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