CheckBox 多选框
在一组备选项中可选多个。
何时使用
- 在一组选项中进行多项选择。
- 单独使用时表示"是 / 否"两态切换。
基本使用
v-model 直接绑定布尔值，默认插槽是右侧文字。
用 label 属性显示文字
不写默认插槽时，label 属性直接作为说明文字。
禁用
disabled 让选项不可切换。
自定义颜色
color 改变选中态色块（与品牌色冲突时常用，如警示型业务）。
多选框组
<c-check-box-group> 把一组 CheckBox 放进同一个数组 v-model。
排列方向
direction 切换纵向（默认）/ 横向。
整组禁用 / 整组着色
在 group 上设置 disabled 或 color 一次性应用到组内所有项。
切换前钩子
group 的 before-change 接收 (isChecked, label)，返回 false 阻止本次操作。
API
CheckBox Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | boolean | — | 必选，单独使用时绑定布尔；group 内由 group 接管 |
| label | string | number | boolean | — | 单独使用且无插槽时作为文案；与 group 配合时作为本项的值 |
| disabled | boolean | false | 是否禁用 |
| color | string | — | 自定义选中色 |
| beforeChange | (isChecked: boolean, v: string) => boolean | Promise<boolean> | — | 切换前的钩子 |
CheckBox Events
| 事件 | 回调签名 | 说明 |
|---|---|---|
| change | (value: boolean) | 值改变时触发 |
CheckBoxGroup Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | Array<string | number> | [] | 已选项数组，支持 v-model |
| disabled | boolean | false | 整组禁用 |
| color | string | — | 整组的选中色 |
| direction | 'row' | 'column' | 'column' | 排列方向 |
| beforeChange | (isChecked: boolean, v: string) => boolean | Promise<boolean> | — | 切换前的钩子 |
CheckBoxGroup Events
| 事件 | 回调签名 | 说明 |
|---|---|---|
| change | (values: string[]) | 选中项改变时触发 |
Slots
| 名称 | 说明 |
|---|---|
| default | 多选框右侧文本 |