/*! For license information please see 5573.bc995e99.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5573"],{66470:function(s,a,n){"use strict";n.r(a);var l=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Checkbox \u590D\u9009\u6846

\n

\u4ECB\u7ECD

\n

\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Checkbox, CheckboxGroup } from 'vant';\n\nconst app = createApp();\napp.use(Checkbox);\napp.use(CheckboxGroup);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u901A\u8FC7 v-model \u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002

\n
<van-checkbox v-model="checked">\u590D\u9009\u6846</van-checkbox>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    return { checked };\n  },\n};\n
\n

\u7981\u7528\u72B6\u6001

\n

\u901A\u8FC7\u8BBE\u7F6E disabled \u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002

\n
<van-checkbox v-model="checked" disabled>\u590D\u9009\u6846</van-checkbox>\n
\n

\u81EA\u5B9A\u4E49\u5F62\u72B6

\n

\u5C06 shape \u5C5E\u6027\u8BBE\u7F6E\u4E3A square\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002

\n
<van-checkbox-group v-model="checked" shape="square">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(['a', 'b']);\n    return { checked };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u989C\u8272

\n

\u901A\u8FC7 checked-color \u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002

\n
<van-checkbox v-model="checked" checked-color="#ee0a24">\u590D\u9009\u6846</van-checkbox>\n
\n

\u81EA\u5B9A\u4E49\u5927\u5C0F

\n

\u901A\u8FC7 icon-size \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002

\n
<van-checkbox v-model="checked" icon-size="24px">\u590D\u9009\u6846</van-checkbox>\n
\n

\u81EA\u5B9A\u4E49\u56FE\u6807

\n

\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7 slotProps \u5224\u65AD\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001.

\n
<van-checkbox v-model="checked">\n  \u81EA\u5B9A\u4E49\u56FE\u6807\n  <template #icon="props">\n    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n  </template>\n</van-checkbox>\n\n<style>\n  .img-icon {\n    height: 20px;\n  }\n</style>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    return {\n      checked,\n      activeIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n      inactiveIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n    };\n  },\n};\n
\n

\u5DE6\u4FA7\u6587\u672C

\n

\u5C06 label-position \u5C5E\u6027\u8BBE\u7F6E\u4E3A \'left\'\uFF0C\u53EF\u4EE5\u5C06\u6587\u672C\u4F4D\u7F6E\u8C03\u6574\u5230\u590D\u9009\u6846\u5DE6\u4FA7\u3002

\n
<van-checkbox v-model="checked" label-position="left">\u590D\u9009\u6846</van-checkbox>\n
\n

\u7981\u7528\u6587\u672C\u70B9\u51FB

\n

\u8BBE\u7F6E label-disabled \u5C5E\u6027\u540E\uFF0C\u70B9\u51FB\u56FE\u6807\u4EE5\u5916\u7684\u5185\u5BB9\u4E0D\u4F1A\u89E6\u53D1\u590D\u9009\u6846\u5207\u6362\u3002

\n
<van-checkbox v-model="checked" label-disabled>\u590D\u9009\u6846</van-checkbox>\n
\n

\u590D\u9009\u6846\u7EC4

\n

\u590D\u9009\u6846\u53EF\u4EE5\u4E0E\u590D\u9009\u6846\u7EC4\u4E00\u8D77\u4F7F\u7528\uFF0C\u590D\u9009\u6846\u7EC4\u901A\u8FC7 v-model \u6570\u7EC4\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002

\n
<van-checkbox-group v-model="checked">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(['a', 'b']);\n    return { checked };\n  },\n};\n
\n

\u6C34\u5E73\u6392\u5217

\n

\u5C06 direction \u5C5E\u6027\u8BBE\u7F6E\u4E3A horizontal \u540E\uFF0C\u590D\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002

\n
<van-checkbox-group v-model="checked" direction="horizontal">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    return { checked };\n  },\n};\n
\n

\u9650\u5236\u6700\u5927\u53EF\u9009\u6570

\n

\u901A\u8FC7 max \u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u590D\u9009\u6846\u7EC4\u7684\u6700\u5927\u53EF\u9009\u6570\u3002

\n
<van-checkbox-group v-model="checked" :max="2">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n  <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n
\n

\u5168\u9009\u4E0E\u53CD\u9009

\n

\u901A\u8FC7 CheckboxGroup \u5B9E\u4F8B\u4E0A\u7684 toggleAll \u65B9\u6CD5\u53EF\u4EE5\u5B9E\u73B0\u5168\u9009\u4E0E\u53CD\u9009\u3002

\n
<van-checkbox-group v-model="checked" ref="checkboxGroup">\n  <van-checkbox name="a">\u590D\u9009\u6846 a</van-checkbox>\n  <van-checkbox name="b">\u590D\u9009\u6846 b</van-checkbox>\n  <van-checkbox name="c">\u590D\u9009\u6846 c</van-checkbox>\n</van-checkbox-group>\n\n<van-button type="primary" @click="checkAll">\u5168\u9009</van-button>\n<van-button type="primary" @click="toggleAll">\u53CD\u9009</van-button>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    const checkboxGroup = ref(null);\n    const checkAll = () => {\n      checkboxGroup.value.toggleAll(true);\n    }\n    const toggleAll = () => {\n      checkboxGroup.value.toggleAll();\n    },\n\n    return {\n      checked,\n      checkAll,\n      toggleAll,\n      checkboxGroup,\n    };\n  },\n};\n
\n

\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528

\n

\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528\u65F6\uFF0C\u9700\u8981\u518D\u5F15\u5165 Cell \u548C CellGroup \u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 Checkbox \u5B9E\u4F8B\u4E0A\u7684 toggle \u65B9\u6CD5\u89E6\u53D1\u5207\u6362\u3002

\n
<van-checkbox-group v-model="checked">\n  <van-cell-group inset>\n    <van-cell\n      v-for="(item, index) in list"\n      clickable\n      :key="item"\n      :title="`\u590D\u9009\u6846 ${item}`"\n      @click="toggle(index)"\n    >\n      <template #right-icon>\n        <van-checkbox\n          :name="item"\n          :ref="el => checkboxRefs[index] = el"\n          @click.stop\n        />\n      </template>\n    </van-cell>\n  </van-cell-group>\n</van-checkbox-group>\n
\n
import { ref, onBeforeUpdate } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref([]);\n    const checkboxRefs = ref([]);\n    const toggle = (index) => {\n      checkboxRefs.value[index].toggle();\n    };\n\n    onBeforeUpdate(() => {\n      checkboxRefs.value = [];\n    });\n\n    return {\n      list: ['a', 'b'],\n      toggle,\n      checked,\n      checkboxRefs,\n    };\n  },\n};\n
\n

\u4E0D\u786E\u5B9A\u72B6\u6001

\n

\u901A\u8FC7 indeterminate \u8BBE\u7F6E\u590D\u9009\u6846\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001\u3002

\n
<van-checkbox\n  v-model="isCheckAll"\n  :indeterminate="isIndeterminate"\n  @change="checkAllChange"\n>\n  \u5168\u9009\n</van-checkbox>\n\n<van-checkbox-group v-model="checkedResult" @change="checkedResultChange">\n  <van-checkbox v-for="item in list" :key="item" :name="item">\n    \u590D\u9009\u6846 {{ item }}\n  </van-checkbox>\n</van-checkbox-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const list = ['a', 'b', 'c', 'd']\n\n    const isCheckAll = ref(false);\n    const checkedResult = ref(['a', 'b', 'd']);\n    const isIndeterminate = ref(true);\n\n    const checkAllChange = (val: boolean) => {\n      checkedResult.value = val ? list : []\n      isIndeterminate.value = false\n    }\n\n    const checkedResultChange = (value: string[]) => {\n      const checkedCount = value.length\n      isCheckAll.value = checkedCount === list.length\n      isIndeterminate.value = checkedCount > 0 && checkedCount < list.length\n    }\n\n    return {\n      list,\n      isCheckAll,\n      checkedResult,\n      checkAllChange,\n      isIndeterminate,\n      checkedResultChange\n    };\n  },\n};\n
\n

API

\n

Checkbox Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001booleanfalse
name\u6807\u8BC6\u7B26\uFF0C\u901A\u5E38\u4E3A\u4E00\u4E2A\u552F\u4E00\u7684\u5B57\u7B26\u4E32\u6216\u6570\u5B57any-
shape\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
disabled\u662F\u5426\u7981\u7528\u590D\u9009\u6846booleanfalse
label-disabled\u662F\u5426\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FBbooleanfalse
label-position\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A leftstringright
icon-size\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string20px
checked-color\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa
bind-group\u662F\u5426\u4E0E\u590D\u9009\u6846\u7EC4\u7ED1\u5B9Abooleantrue
indeterminate\u662F\u5426\u4E3A\u4E0D\u786E\u5B9A\u72B6\u6001booleanfalse
\n

CheckboxGroup Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u6240\u6709\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26any[]-
disabled\u662F\u5426\u7981\u7528\u6240\u6709\u590D\u9009\u6846booleanfalse
max\u6700\u5927\u53EF\u9009\u6570\uFF0C0 \u4E3A\u65E0\u9650\u5236number | string0
direction\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A horizontalstringvertical
icon-size\u6240\u6709\u590D\u9009\u6846\u7684\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string20px
checked-color\u6240\u6709\u590D\u9009\u6846\u7684\u9009\u4E2D\u72B6\u6001\u989C\u8272string#1989fa
shape v4.6.3\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
\n

Checkbox Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6checked: boolean
click\u70B9\u51FB\u590D\u9009\u6846\u65F6\u89E6\u53D1event: MouseEvent
\n

CheckboxGroup Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6names: any[]
\n

Checkbox Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E\u53C2\u6570
default\u81EA\u5B9A\u4E49\u6587\u672C{ checked: boolean, disabled: boolean }
icon\u81EA\u5B9A\u4E49\u56FE\u6807{ checked: boolean, disabled: boolean }
\n

CheckboxGroup \u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 CheckboxGroup \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
toggleAll\u5207\u6362\u6240\u6709\u590D\u9009\u6846\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CDoptions?: boolean | object-
\n

toggleAll \u65B9\u6CD5\u793A\u4F8B

\n
import { ref } from 'vue';\nimport type { CheckboxGroupInstance } from 'vant';\n\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\n// \u5168\u90E8\u53CD\u9009\ncheckboxGroupRef?.value.toggleAll();\n// \u5168\u90E8\u9009\u4E2D\ncheckboxGroupRef?.value.toggleAll(true);\n// \u5168\u90E8\u53D6\u6D88\ncheckboxGroupRef?.value.toggleAll(false);\n\n// \u5168\u90E8\u53CD\u9009\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n  skipDisabled: true,\n});\n// \u5168\u90E8\u9009\u4E2D\uFF0C\u5E76\u8DF3\u8FC7\u7981\u7528\u7684\u590D\u9009\u6846\ncheckboxGroupRef?.value.toggleAll({\n  checked: true,\n  skipDisabled: true,\n});\n
\n

Checkbox \u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
toggle\u5207\u6362\u9009\u4E2D\u72B6\u6001\uFF0C\u4F20 true \u4E3A\u9009\u4E2D\uFF0Cfalse \u4E3A\u53D6\u6D88\u9009\u4E2D\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CDchecked?: boolean-
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type {\n  CheckboxProps,\n  CheckboxShape,\n  CheckboxInstance,\n  CheckboxLabelPosition,\n  CheckboxGroupProps,\n  CheckboxGroupInstance,\n  CheckboxGroupDirection,\n  CheckboxGroupToggleAllOptions,\n} from 'vant';\n
\n

CheckboxInstance \u548C CheckboxGroupInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

\n
import { ref } from 'vue';\nimport type { CheckboxInstance, CheckboxGroupInstance } from 'vant';\n\nconst checkboxRef = ref<CheckboxInstance>();\nconst checkboxGroupRef = ref<CheckboxGroupInstance>();\n\ncheckboxRef.value?.toggle();\ncheckboxGroupRef.value?.toggleAll();\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-checkbox-size20px-
--van-checkbox-border-colorvar(--van-gray-5)-
--van-checkbox-durationvar(--van-duration-fast)-
--van-checkbox-label-marginvar(--van-padding-xs)-
--van-checkbox-label-colorvar(--van-text-color)-
--van-checkbox-checked-icon-colorvar(--van-primary-color)-
--van-checkbox-disabled-icon-colorvar(--van-gray-5)-
--van-checkbox-disabled-label-colorvar(--van-text-color-3)-
--van-checkbox-disabled-backgroundvar(--van-border-color)-
\n
'},null,8,t))}}}]);