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

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. <nut-checkbox
  2. v-model="checkbox1"
  3. size="small">
  4. 小号
  5. </nut-checkbox>
  6. <nut-checkbox
  7. v-model="checkbox2"
  8. size="base" >
  9. 默认
  10. </nut-checkbox>
  11. <nut-checkbox
  12. v-model="checkbox3"
  13. size="large">
  14. 大号
  15. </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. }
  5. }

注意:当设置了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