import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Checkbox \u590D\u9009\u6309\u94AE

\u4ECB\u7ECD

\u591A\u9009\u6309\u94AE\u7528\u4E8E\u9009\u62E9\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
// taro
import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui-taro';

const app = createApp();
app.use(Checkbox);
app.use(CheckboxGroup);
app.use(Icon);

\u57FA\u672C\u7528\u6CD5

<nut-checkbox v-model="checkbox1" label="\u590D\u9009\u6846">\u590D\u9009\u6846</nut-checkbox>
<nut-checkbox v-model="checkbox2" text-position="left">\u590D\u9009\u6846</nut-checkbox>

setup() {
  return {
    checkbox1: false,
    checkbox2: false,
  };
}

\u7981\u7528\u72B6\u6001

<nut-checkbox v-model="checkbox3" disabled>\u672A\u9009\u65F6\u7981\u7528\u72B6\u6001</nut-checkbox>
<nut-checkbox v-model="checkbox4" disabled>\u9009\u4E2D\u65F6\u7981\u7528\u72B6\u6001</nut-checkbox>

setup() {
  return {
    checkbox3: false,
    checkbox4: true,
  };
}

\u81EA\u5B9A\u4E49\u5C3A\u5BF8

<nut-checkbox v-model="checkbox5" icon-size="25">\u81EA\u5B9A\u4E49\u5C3A\u5BF825</nut-checkbox>
<nut-checkbox v-model="checkbox6" icon-size="10">\u81EA\u5B9A\u4E49\u5C3A\u5BF810</nut-checkbox>

setup() {
  return {
    checkbox5: true,
    checkbox6: false,
  };
}

\u81EA\u5B9A\u4E49\u56FE\u6807

\u8FD9\u91CC\u5EFA\u8BAE\u540C\u65F6\u8BBE\u7F6E icon-name \u548C icon-active-name \u5C5E\u6027

<nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">\u81EA\u5B9A\u4E49\u56FE\u6807</nut-checkbox>

setup() {
  return {
    checkbox7: true,
  };
}

change\u4E8B\u4EF6

\u503C\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u5C06\u89E6\u53D1change\u4E8B\u4EF6

<nut-checkbox v-model="checkbox" @change="changeBox3">change\u590D\u9009\u6846</nut-checkbox>

setup() {
  const checkbox = ref(false);
  const changeBox3= (checked: boolean, label: string) => {
    console.log('change\u4E8B\u4EF6\u89E6\u53D1' + checked, label);
	}  
  return {
    checkbox,
    changeBox3
  };
}

checkboxGroup\u4F7F\u7528

<nut-checkboxgroup v-model="checkboxgroup1">
  <nut-checkbox label="1">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
  <nut-checkbox label="2">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
  <nut-checkbox label="3">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
  <nut-checkbox label="4">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
</nut-checkboxgroup>

setup() {
  return {
    checkboxgroup1: ['2', '3'],
  };
}

checkboxGroup \u5168\u9009/\u53D6\u6D88

<nut-checkboxgroup v-model="checkboxgroup3" ref="group" @change="changeBox4">
  <nut-checkbox label="1">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
  <nut-checkbox label="2">\u7EC4\u5408\u590D\u9009\u6846</nut-checkbox>
</nut-checkboxgroup>
<span class="btn">
  <nut-button type="primary" @click="toggleAll(true)">\u5168\u9009</nut-button>
  <nut-button type="primary" @click="toggleAll(false)">\u53D6\u6D88</nut-button>
</span>

setup() {
  const group = ref(null);
  const changeBox4 = (label: any[]) => {
    Toast.text(\`\${label.length ? '\u5168\u9009' : '\u53D6\u6D88\u5168\u9009'}\`);
  };

  const toggleAll = (f: boolean) => {
    (group.value as any).toggleAll(f);
  };
  return {
    checkboxgroup3: ['2'],
    group,
    changeBox4,
    toggleAll
  };
}

Checkbox

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u662F\u5426\u5904\u4E8E\u9009\u4E2D\u72B6\u6001	Boolean	`false`
disabled	\u662F\u5426\u7981\u7528\u9009\u62E9	Boolean	`false`
text-position	\u6587\u672C\u6240\u5728\u7684\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\uFF1A`left`,`right`	String	`right`
icon-size	\u56FE\u6807\u5C3A\u5BF8	String\u3001Number	`18`
icon-name	\u56FE\u6807\u540D\u79F0\uFF0C\u9009\u4E2D\u524D(\u5EFA\u8BAE\u548C`icon-active-name`\u4E00\u8D77\u4FEE\u6539)	String	`'check-normal'`
icon-active-name	\u56FE\u6807\u540D\u79F0\uFF0C\u9009\u4E2D\u540E(\u5EFA\u8BAE\u548C`icon-name`\u4E00\u8D77\u4FEE\u6539)	String	`'checked'`
label	\u590D\u9009\u6846\u7684\u6587\u672C\u5185\u5BB9	String	-

CheckboxGroup

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26\uFF0C\u548C `label` \u76F8\u5BF9\u5E94	String	-
disabled	\u662F\u5426\u7981\u7528\u9009\u62E9,\u5C06\u7528\u4E8E\u5176\u4E0B\u7684\u5168\u90E8\u590D\u9009\u6846	Boolean	`false`

Checkbox Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u503C\u53D8\u5316\u65F6\u89E6\u53D1	(state, label),`state`\u4EE3\u8868\u5F53\u524D\u72B6\u6001\uFF0C`label`\u8868\u793A\u5F53\u524D\u9009\u4E2D\u7684\u503C

CheckboxGroup Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u503C\u53D8\u5316\u65F6\u89E6\u53D1	label,`label`\u8FD4\u56DE\u4E00\u4E2A\u6570\u7EC4\uFF0C\u8868\u793A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u96C6\u5408

`,36),c=[p],d={setup(e,{expose:s}){return s({frontmatter:{}}),(o,r)=>(n(),a("div",l,c))}};export{d as default};