Checkbox 复选按钮

基本用法

  1. <nut-checkbox 
  2.     v-model="checkbox1">
  3.     选项
  4. </nut-checkbox>
  1. data() {
  2.     return {
  3.           checkbox1: false,
  4.     };
  5. }

禁用状态

非选中时的禁用状态

  1. <nut-checkbox 
  2.     v-model="checkbox1" 
  3.     disabled>
  4.     未选时禁用状态
  5. </nut-checkbox>
  1. data() {
  2.     return {
  3.           checkbox1: false,
  4.     };
  5. }

选中时的禁用状态

  1. <nut-checkbox 
  2.     v-model="checkbox1" 
  3.     disabled>
  4.     已选时禁用状态
  5. </nut-checkbox>
  1. data() {
  2.     return {
  3.           checkbox1: true,
  4.     };
  5. },

自定义尺寸

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

  1. <nut-checkbox 
  2.     v-model="checkbox1" 
  3.     size="small">
  4.     小号
  5. </nut-checkbox>
  7. <nut-checkbox 
  8.     v-model="checkbox2" 
  9.     size="base" >
  10.      默认
  11. </nut-checkbox>
  13. <nut-checkbox 
  14.     v-model="checkbox3"  
  15.     size="large">
  16.     大号
  17. </nut-checkbox>
  1. data() {
  2.     return {
  3.           checkbox1: true,
  4.           checkbox2: true,
  5.           checkbox3: true,
  6.     };
  7. }

禁用动效

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

  1. <nut-checkbox 
  2.     v-model="checkbox1"
  3.     :animation="false">
  4.     没有动效
  5. </nut-checkbox>
  1. data() {
  2.     return {
  3.           checkbox1: false,
  4.     };
  5. }

事件

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

  1. <nut-checkbox 
  2.     v-model="checkbox1" 
  3.     @change="checkboxChange">
  4.     change事件
  5. </nut-checkbox>
  1. methods: {
  2.     checkboxChange(checked) {
  3.         alert('change事件触发' + checked);
  4.     }  
  5. }

设置label属性，获取选项状态和选项label值的方法：

  1. <nut-checkbox 
  2.     v-model="checkbox1"
  3.     :label="'选项值'"  
  4.     @change="getChange">
  5.     备选项
  6. </nut-checkbox>
  1. methods: {
  2.     getChange(checked,val){
  3.         console.log('选中状态：' + checked +'，选中选项：' + val) 
  4.     }
  6. }

注意：当设置了label属性时，第二个参数label才有值，否则默认为空。(label设置后替换插值内容)

新增自定义class

  1. <nut-checkbox 
  2.     v-model="checkbox1"
  3.     class="my-checkbox">
  4.     自定义了Class:"my-checkbox"
  5. </nut-checkbox>

Prop

字段说明类型默认值
namecheckbox的name属性String-
v-model必填项，当前选中项的选中状态,同步valueBooleanfalse
label当前选中项的label值，（可不设，设置后label有值，替换插值内容）String-
checkedcheckbox的checked属性Booleanfalse
size尺寸，可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animation是否需要动效Booleantrue

Event

字段说明回调参数
change值变化时触发当前选中项状态（checked），当前选中项值（label）【设置label后有值、默认为空】,event

CheckBox 复选按钮 - 图1