import{c as t,o as e,A as o}from"./vendor.80bf15c7.js";const c={class:"markdown-body"},n=o('

Checkbox 复选按钮

介绍

多选按钮用于选择。

安装

import { createApp } from 'vue';\nimport { Checkbox } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Checkbox);\n

基本用法

<nut-checkbox v-model="checkbox">选项</nut-checkbox>\n
setup() {\n  return {\n    checkbox: false,\n  };\n}\n

CheckboxGroup基本用法

<nut-checkboxgroup v-model="checkboxGroup">\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  return {\n    checkboxGroup: ['选项一'],\n  };\n}\n

禁用状态

<nut-checkbox v-model="checkbox1" disabled>未选时禁用状态</nut-checkbox>\n<nut-checkbox v-model="checkbox2" disabled>已选时禁用状态</nut-checkbox>\n
setup() {\n  return {\n    checkbox1: false,\n    checkbox2: true,\n  };\n}\n

CheckboxGroup整体禁用

<nut-checkboxgroup v-model="checkboxGroup" disabled>\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  return {\n    checkboxGroup: ['选项一'],\n  };\n}\n

自定义尺寸

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

<nut-checkbox v-model="checkbox1" size="small">小号1</nut-checkbox>\n<nut-checkbox v-model="checkbox2" size="base">默认</nut-checkbox>\n<nut-checkbox v-model="checkbox3" size="large">大号</nut-checkbox>\n
setup() {\n  return {\n    checkbox1: true,\n    checkbox2: true,\n    checkbox3: true,\n  };\n}\n\n

CheckboxGroup整体尺寸

<nut-checkboxgroup v-model="checkboxGroup" size="small">\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  return {\n    checkboxGroup: [],\n  };\n}\n

禁用动效

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

<nut-checkbox v-model="checkbox" :animation="false">没有动效</nut-checkbox>\n
setup() {\n  return {\n    checkbox: false,\n  };\n}\n

CheckboxGroup整体禁用动效

<nut-checkboxgroup v-model="checkboxGroup" :animation="false">\n  <nut-checkbox label="没有动效1"></nut-checkbox>\n  <nut-checkbox label="没有动效2"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  return {\n    checkboxGroup: ['没有动效1'],\n  };\n}\n

事件

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

<nut-checkbox v-model="checkbox" @change="checkboxChange">\n  change事件\n</nut-checkbox>\n
setup() {\n  const checkbox = ref(false);\n  const checkboxChange= (checked) => {\n    console.log('change事件触发' + checked);\n\t}  \n  return {\n    checkbox,\n    checkboxChange\n  };\n}\n

CheckboxGroup整体事件

<nut-checkboxgroup v-model="checkboxGroup" @change="getChange">\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  const checkboxGroup = reactive(['选项一']);\n  const getChange= (val) => {\n    console.log('选中状态选项：' + val);\n\t}  \n  return {\n    checkboxGroup,\n    getChange\n  };\n}\n

自定义class

<nut-checkbox class="my-checkbox" v-model="checkbox">自定义Class:"my-checkbox"</nut-checkbox>\n
setup() {\n  const checkbox = ref(false);\n  return {\n    checkbox,\n  };\n}\n

全选与反选

<nut-checkboxgroup\n  ref="checkboxGroupDemo"\n  v-model="checkboxGroup"\n  @change="getChange"\n>\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n  <nut-checkbox label="选项三"></nut-checkbox>\n</nut-checkboxgroup>\n<nut-button size="small" type="primary" @click="chooseAll(true)">全选</nut-button>\n<nut-button size="small" type="primary" @click="chooseAll()">反选</nut-button>\n<nut-button size="small" type="primary" @click="chooseAll(false)">取消</nut-button>\n
setup() {\n  const checkboxGroup = ref([]);\n  const getChange = (val: string) => {\n    console.log('选中状态选项：' + val);\n  };\n  const checkboxGroupDemo = ref(null);\n  const chooseAll = (val: boolean | string) => {\n    (checkboxGroupDemo.value as any).toggleAll(val);\n  };\n  return {\n    checkboxGroup,\n    getChange,\n    chooseAll\n  };\n}\n

CheckboxGroup排列方向

<nut-checkboxgroup\n  v-model="checkboxGroup"\n  direction="vertical"\n  @change="getChange"\n>\n  <nut-checkbox label="选项一"></nut-checkbox>\n  <nut-checkbox label="选项二"></nut-checkbox>\n  <nut-checkbox label="选项三"></nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  const checkboxGroup = ref([]);\n  const getChange = (val: string) => {\n    console.log('选中状态选项：' + val);\n  };\n  return {\n    checkboxGroup,\n    getChange,\n  };\n}\n

Prop

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

CheckGroup

字段说明类型默认值
v-model必填项，当前选中项的选中状态,同步valueBooleanfalse
size尺寸，可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animation是否需要动效Booleantrue

Event

字段说明回调参数
change值变化时触发当前选中项状态（checked），当前选中项值（label）【设置label后有值、默认为空】,event
',53),u={expose:[],setup:o=>(o,u)=>(e(),t("div",c,[n]))};export default u;