Skip to content

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 参数

参数类型默认说明
checkedboolean--受控勾选状态;group 模式下由 group 注入决定
valuestringnumber--
disabledbooleanfalse是否禁用

CheckableTag 事件

事件名参数说明
update:checkedbooleanv-model:checked(仅独立使用时触发)
changeboolean状态切换(仅独立使用时触发)

CheckableTag 插槽

插槽名说明
default标签文本内容

CheckableTagGroup 参数

参数类型默认说明
modelValue(stringnumber)[][]
optionsCheckableTagOption[]--声明式选项 { label, value, disabled? }
disabledbooleanfalse是否禁用整个 group
maxCountnumber--最大勾选数量;达上限后未勾选项 click 被忽略
size'large''default''small'

CheckableTagGroup 事件

事件名参数说明
update:modelValue(stringnumber)[]
change(stringnumber)[]

CheckableTagGroup 插槽

插槽名说明
default内嵌 <c-checkable-tag :value="..."> 子标签,由 group 接管

Released under the MIT License.