Checkbox 复选框

一组备选项中进行多选，支持单独使用和组合使用。

基础用法

单独使用 v-model 绑定布尔值，配合 label 显示文本标签。

选项 A选项 B

<template>
  <ZcCheckbox v-model="checked1">选项 A</ZcCheckbox>
  <ZcCheckbox v-model="checked2">选项 B</ZcCheckbox>
</template>

复选框组

使用 ZcCheckboxGroup 配合多个 ZcCheckbox 实现多选组。

选项 A选项 B选项 C

<template>
  <ZcCheckboxGroup v-model="checkedList">
    <ZcCheckbox label="A">选项 A</ZcCheckbox>
    <ZcCheckbox label="B">选项 B</ZcCheckbox>
    <ZcCheckbox label="C">选项 C</ZcCheckbox>
  </ZcCheckboxGroup>
</template>

禁用状态

通过 disabled 属性禁用复选框。

禁用

选项 A选项 B

<template>
  <ZcCheckbox v-model="checked1" disabled>禁用</ZcCheckbox>
  <ZcCheckboxGroup v-model="checkedList" disabled>
    <ZcCheckbox label="A">选项 A</ZcCheckbox>
    <ZcCheckbox label="B">选项 B</ZcCheckbox>
  </ZcCheckboxGroup>
</template>

半选状态

通过 indeterminate 属性实现半选（全选/取消全选）状态。

全选

选项 A选项 B选项 C

<template>
  <ZcCheckbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAll">
    全选
  </ZcCheckbox>
  <ZcCheckboxGroup v-model="checkedList">
    <ZcCheckbox label="A">选项 A</ZcCheckbox>
    <ZcCheckbox label="B">选项 B</ZcCheckbox>
    <ZcCheckbox label="C">选项 C</ZcCheckbox>
  </ZcCheckboxGroup>
</template>

Checkbox API

Checkbox Props

参数	说明	类型	默认值
modelValue	绑定值（单独使用时为布尔值）	boolean | string | number	false
label	复选框的标签值（组模式下作为选中标识）	string | number | boolean	—
disabled	是否禁用	boolean	false
indeterminate	是否半选状态	boolean	false
name	原生 name 属性	string	—

Checkbox Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	(value: boolean)
change	值变更时触发	(value: boolean)

Checkbox Slots

插槽名	说明
default	复选框标签内容（默认显示 label 文本）

CheckboxGroup Props

参数	说明	类型	默认值
modelValue	绑定的选中值数组	Array<string | number | boolean>	[]
disabled	是否禁用整个组	boolean	false

CheckboxGroup Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	(value: Array<string | number | boolean>)
change	选中值变化时触发	(value: Array<string | number | boolean>)