Checkbox 多选框
在一组备选项中进行多选。
注意
label 作为 value 来使用已经被 废弃，建议 label 只用来表示展示文字，请使用 value 绑定实际值。
提示
文档示例统一使用 value。如果项目里还存在把 label 当值使用的旧写法，建议逐步迁移。
ts
import { createApp } from 'vue'
import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElCheckbox)
app.use(ElCheckboxButton)
app.use(ElCheckboxGroup)基础用法
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
禁用状态
多选框不可用状态。
多选框组
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
Options 属性
中间状态
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选组合。
带有边框
Checkbox API
Checkbox Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string / number / boolean | — |
| value | 选中状态的值（只有在checkbox-group或者绑定对象类型为array 时有效） | string / number / boolean / object | — |
| label | 选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用 | string / number / boolean / object | — |
| true-value | 选中时的值 | string / number | — |
| false-value | 没有选中时的值 | string / number | — |
| disabled | 是否禁用 | boolean | false |
| border | 是否显示边框 | boolean | false |
| size | Checkbox 的尺寸 | enum | — |
| name | 原生 name 属性 | string | — |
| checked | 当前是否勾选 | boolean | false |
| indeterminate | 设置不确定状态，仅负责样式控制 | boolean | false |
| validate-event | 输入时是否触发表单的校验 | boolean | true |
| tabindex | 输入框的 tabindex | string / number | — |
| id | input id | string | — |
| aria-controls a11y | 与 aria-control一致, 当 indeterminate为 true时生效 | string | — |
| aria-label a11y | 原生 aria-label属性 | string | — |
| true-label deprecated | 选中时的值 | string / number | — |
| false-label deprecated | 没有选中时的值 | string / number | — |
| controls a11y deprecated | 和 aria-control一致。当 indeterminate 为 true 时生效 | string | — |
Checkbox Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
Checkbox Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
CheckboxGroup API
CheckboxGroup Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | array | [] |
| size | 多选框组尺寸 | enum | — |
| disabled | 是否禁用 | boolean | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — |
| aria-label a11y | 原生 aria-label属性 | string | — |
| text-color | 当按钮为活跃状态时的字体颜色 | string | #ffffff |
| fill | 当按钮为活跃状态时的边框和背景颜色 | string | #409eff |
| tag | 复选框组元素标签 | string | div |
| validate-event | 是否触发表单验证 | boolean | true |
| label a11y deprecated | 原生 aria-label属性 | string | — |
| options | 选项的数据源， value 的 key 和 label 和 disabled可以通过 props自定义. | array | — |
| props | options 的配置 | object | {value: 'value', label: 'label', disabled: 'disabled'} |
| type | 用于渲染选项的组件类型（例如 'button'） | enum | 'checkbox' |
CheckboxGroup Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
CheckboxGroup Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Checkbox / Checkbox-button |
CheckboxButton API
CheckboxButton Attributes
| 名称 | 详情 | 类型 | 默认值 |
|---|---|---|---|
| value | 选中状态的值，只有在绑定对象类型为 array 时有效。 | string / number / boolean / object | — |
| label | 选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用 | string / number / boolean / object | — |
| true-value | 选中时的值 | string / number | — |
| false-value | 没有选中时的值 | string / number | — |
| disabled | 是否禁用 | boolean | false |
| name | 原生 name 属性 | string | — |
| checked | 当前是否勾选 | boolean | false |
| true-label deprecated | 选中时的值 | string / number | — |
| false-label deprecated | 没有选中时的值 | string / number | — |
CheckboxButton Slots
| 插槽名 | 描述 |
|---|---|
| default | 自定义默认内容 |