CheckableTag 可勾选标签
可勾选切换的标签,作为独立顶层组件存在(不挂在 Tag 命名空间下)。配套 CheckableTagGroup 容器组件支持多选。
何时使用
- 需要标签形态的开关 / 多选筛选(如话题标签、兴趣分类)。
- 替代 Checkbox 的轻量场景。
单独使用
v-model:checked 受控;点击 / Space / Enter 切换。
多选 group(options 模式)
CheckableTagGroup 配合 options 声明式渲染。
多选 group(默认 slot 模式)
也可以在默认 slot 里直接放 <c-checkable-tag :value="...">,由 group 自动接管勾选状态。
最大勾选数
maxCount 达到上限后未勾选项的 click 被忽略;已勾选项仍可取消。
禁用整个 group
尺寸
CheckableTag 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| checked | boolean | -- | 受控勾选状态;group 模式下由 group 注入决定 |
| value | string | number | -- |
| disabled | boolean | false | 是否禁用 |
CheckableTag 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:checked | boolean | v-model:checked(仅独立使用时触发) |
| change | boolean | 状态切换(仅独立使用时触发) |
CheckableTag 插槽
| 插槽名 | 说明 |
|---|---|
| default | 标签文本内容 |
CheckableTagGroup 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | (string | number)[] | [] |
| options | CheckableTagOption[] | -- | 声明式选项 { label, value, disabled? } |
| disabled | boolean | false | 是否禁用整个 group |
| maxCount | number | -- | 最大勾选数量;达上限后未勾选项 click 被忽略 |
| size | 'large' | 'default' | 'small' |
CheckableTagGroup 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | (string | number)[] |
| change | (string | number)[] |
CheckableTagGroup 插槽
| 插槽名 | 说明 |
|---|---|
| default | 内嵌 <c-checkable-tag :value="..."> 子标签,由 group 接管 |