System.register(["./vendor-legacy.d8a4b3f3.js"],(function(s){"use strict";var a,n,l;return{setters:[function(s){a=s.e,n=s.o,l=s.G}],execute:function(){const t={class:"markdown-body"},p=[l('

Checkbox 复选按钮

介绍

多选按钮用于选择。

安装

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

基本用法

<nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>\n<nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>\n
setup() {\n  return {\n    checkbox1: false,\n    checkbox2: false,\n  };\n}\n

禁用状态

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

自定义尺寸

<nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>\n<nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>\n
setup() {\n  return {\n    checkbox5: true,\n    checkbox6: false,\n  };\n}\n\n

自定义图标

这里建议同时设置 icon-name 和 icon-active-name 属性

<nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>\n
setup() {\n  return {\n    checkbox7: true,\n  };\n}\n\n

change事件

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

<nut-checkbox v-model="checkbox8" @change="changeBox3">change复选框</nut-checkbox>\n
setup() {\n  const checkbox = ref(false);\n  const changeBox3= (checked: boolean, label: string) => {\n    console.log('change事件触发' + checked, label);\n\t}  \n  return {\n    checkbox,\n    changeBox3\n  };\n}\n

checkboxGroup使用

<nut-checkboxgroup v-model="checkboxgroup1">\n  <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>\n  <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>\n  <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>\n  <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>\n</nut-checkboxgroup>\n
setup() {\n  return {\n    checkbox9: false,\n    checkbox10: false,\n    checkbox11: false,\n    checkbox12: false,\n    checkboxgroup1: ['2', '3'],\n  };\n}\n

checkboxGroup 全选/取消

<nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">\n  <nut-checkbox v-model="checkbox15" label="1">组合复选框</nut-checkbox>\n  <nut-checkbox v-model="checkbox16" label="2">组合复选框</nut-checkbox>\n</nut-checkboxgroup>\n<span class="btn">\n  <nut-button type="primary" @click="toggleAll(true)">全选</nut-button>\n  <nut-button type="primary" @click="toggleAll(false)">取消</nut-button>\n</span>\n
setup() {\n  const group = ref(null);\n  const changeBox4 = (label: any[]) => {\n    Toast.text(`${label.length ? '全选' : '取消全选'}`);\n  };\n\n  const toggleAll = (f: boolean) => {\n    (group.value as any).toggleAll(f);\n  };\n  return {\n    checkbox15: false,\n    checkbox16: false,\n    changeBox4: false,\n    checkbox12: false,\n    checkboxgroup3: ['2'],\n    group,\n    changeBox4,\n    toggleAll\n  };\n}\n

Checkbox

字段说明类型默认值
v-model是否处于选中状态Booleanfalse
disabled是否禁用选择Booleanfalse
text-position文本所在的位置，可选值：left,rightStringright
icon-size图标尺寸String、Number18
icon-name图标名称，选中前(建议和icon-active-name一起修改)String'check-normal'
icon-active-name图标名称，选中后(建议和icon-name一起修改)String'checked'
label复选框的文本内容String-

CheckboxGroup

字段说明类型默认值
v-model当前选中项的标识符，和 label 相对应String-
disabled是否禁用选择,将用于其下的全部复选框Booleanfalse

Checkbox Event

字段说明回调参数
change值变化时触发(state, label),state代表当前状态，label表示当前选中的值

CheckboxGroup Event

字段说明回调参数
change值变化时触发label,label返回一个数组，表示当前选中项的集合
',36)];s("default",{setup:(s,{expose:l})=>(l({frontmatter:{}}),(s,l)=>(n(),a("div",t,p)))})}}}));