仅桌面端保证样式
Checkbox 多选框
可多选的勾选控件:在 eb-checkbox-group 中放置若干 eb-checkbox(或按钮风格的 eb-checkbox-button),绑定值为选中 label 组成的数组;独立使用时支持 boolean / 数组 / true-label 等值语义。在 eb-form 中 change 时机自动触发校验。
基础用法
绑定值为选中 label 组成的数组;单个 checkbox 设置 disabled 只禁用自身(如上例 Svelte),适合个别选项不可勾选的场景。
整组禁用
group 设置 disabled 后整组不可勾选,常用于权限不足、前置条件未满足时的回显展示。
边框与尺寸
border 呈卡片描边样式;size 控制尺寸(large / small),组内可由 group 的 size 统一设置。
按钮风格
eb-checkbox-button 为连体按钮组风格,适合筛选项较多的紧凑布局。
数量限制
group 的 max / min 限制可勾选数量:达到上限后未选项自动禁用,达到下限后已选项禁止取消,用于限选场景(如最多选 2 个标签)。
全选联动
经典全选组合:全选框用 indeterminate 表达半选态(部分选中),change 时全量写入 / 清空数组;子项 change 里根据选中数量同步全选态。indeterminate 只影响样式,不写入绑定值。
handleCheckAll / handleCityChange 定义见页面顶部 script:全选时写入 [...cities],取消时清空数组,子项变化后按数量回写 checkAll。
API
CheckboxGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值(选中项 label 组成的数组),组内所有子项共享 | array | [] |
| min / max | 可勾选数量下限 / 上限(到限后相应选项自动禁用) | number | — |
| size | 组内尺寸,支持 large / small | string | |
| disabled | 禁用整组 | boolean | false |
| fill | 激活态填充色(border / 按钮模式) | string | — |
| text-color | 激活态文字颜色 | string | — |
Checkbox Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 独立使用时的绑定值(boolean / 数组 / true-label 值;group 内由 group 接管) | boolean | array | string | number | — |
| label | 选项值(group 内必填);无插槽内容时兼作显示文案 | string | number | boolean | — |
| indeterminate | 半选态(只影响样式,不改变实际选中值),常用于全选控制 | boolean | false |
| true-label / false-label | 选中 / 未选中时写入绑定值的替代值 | string | number | — |
| checked | modelValue 缺省时的初始选中态 | boolean | — |
| disabled | 禁用(叠加 group disabled 与数量限制判定) | boolean | false |
| border | 卡片描边样式 | boolean | false |
| size | 尺寸(优先级低于 group) | string | |
| name | 原生 name 属性 | string | — |
CheckboxButton Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 独立使用时的绑定值 | boolean | array | — |
| label | 选项值;无插槽内容时兼作显示文案 | string | number | boolean | — |
| checked | modelValue 缺省时的初始选中态 | boolean | — |
| disabled | 禁用(叠加 group disabled) | boolean | false |
| size | 尺寸(优先级低于 group) | string | |
| name | 原生 name 属性 | string | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue / change | 勾选变化,group 返回数组,独立使用返回 boolean / 数组 / 标签值 | (value: any) => void | — |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | Checkbox / CheckboxButton 的显示文案,缺省显示 label | — | — |
Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focus | 使内部原生 input 聚焦(Checkbox、CheckboxButton) | () => void | — |
| blur | 使内部原生 input 失焦(Checkbox、CheckboxButton) | () => void | — |