Appearance
Checkbox 复选框
用于在一组可选项中进行单项或多项选择,支持不定态、禁用、不同尺寸与分组选择。样式基于主题主色变量,默认与全局主题保持一致。
基础用法
使用 v-model 双向绑定布尔值;通过默认插槽或 label 属性显示文案。
禁用状态
通过 disabled 禁用交互。
尺寸
通过 size 调整尺寸:small、default、large。
组合选择(CheckboxGroup)
将多个复选项放入 c-checkbox-group 中,通过 v-model 绑定选中集合(数组),每个子项通过 label 标识其值。
不定态(Indeterminate)
在「全选」场景下,通过 indeterminate 控制不定态,当部分子项选中时显示为中间态。
Props(Checkbox)
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| modelValue | 绑定值 | boolean | — | false |
| label | 选项标识值(用于分组模式匹配) | string | number | boolean | — | undefined |
| disabled | 是否禁用 | boolean | — | false |
| indeterminate | 是否为不定态 | boolean | — | false |
| size | 尺寸 | 'small' | 'default' | 'large' | — | default |
Events(Checkbox)
| 事件名 | 说明 | 参数类型 |
|---|---|---|
| update:modelValue | 选中状态变化(v-model) | boolean |
| change | 选中状态变化(同上) | boolean |
Props(CheckboxGroup)
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| modelValue | 选中集合 | Array<string | number | boolean> | — | [] |
| disabled | 是否禁用所有子项 | boolean | — | false |
| size | 子项尺寸 | 'small' | 'default' | 'large' | — | default |
Events(CheckboxGroup)
| 事件名 | 说明 | 参数类型 |
|---|---|---|
| update:modelValue | 选中集合变化(v-model) | Array<string | number | boolean> |
| change | 选中集合变化(同上) | Array<string | number | boolean> |
样式变量
该组件使用主题主色变量进行着色,可在全局修改:
css
:root {
--c-color-primary: #409eff; /* 主色 */
--c-color-primary-hover: #66b1ff; /* 悬停 */
--c-color-primary-active: #337ecc; /* 激活 */
}- 选中与不定态的背景与边框使用
var(--c-color-primary)。 - 悬停边框使用
var(--c-color-primary-hover)。
无障碍(A11y)
- 使用
role="checkbox"与aria-checked/aria-disabled提供语义。 - 支持空格键切换(聚焦时)。