Tag 标签
用于标记和分类，支持多种颜色类型、样式和交互。
基础用法
通过 type 设置标签颜色类型。
默认主要成功警告危险信息
不同尺寸
设置 size 使用不同大小的标签。
小标签默认标签大标签
主题效果
设置 effect 切换标签主题风格：light / dark / outlined / plain。
默认主要成功警告危险
默认主要成功警告危险
默认主要成功警告危险
默认主要成功警告危险
圆角标签
设置 round 显示为圆角胶囊标签。
默认主要成功警告危险
可关闭标签
设置 closable 显示关闭按钮，监听 close 事件。
标签一标签二标签三
带图标
通过 icon 字段为标签添加内置图标。
首页已完成注意失败设置
可选中标签
设置 checkable 使标签可选中，支持 v-model:checked 或 v-model 双向绑定。
VueReactAngularSvelte
选中：Vue
自定义颜色
设置 color 和 textColor 自定义标签颜色。
紫色青色品红绿色橙色
紫色描边青色描边品红描边
带边框
设置 bordered 为浅色或深色标签添加边框。
浅色带边框浅色带边框深色带边框深色带边框
禁用状态
设置 disabled 禁用标签交互。
禁用标签禁用可关闭禁用可选
动态编辑
通过输入框和关闭按钮实现动态增删标签。
前端VueTypeScript
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 标签类型 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
effect | 'light' | 'dark' | 'outlined' | 'plain' | 'light' | 主题效果 |
round | boolean | false | 是否为圆角胶囊标签 |
closable | boolean | false | 是否可关闭 |
icon | string | — | 内置图标名称 |
color | string | — | 自定义背景色（优先级高于 type） |
textColor | string | — | 自定义文字颜色 |
bordered | boolean | false | 是否显示边框 |
disabled | boolean | false | 是否禁用 |
checkable | boolean | false | 是否可选中 |
checked | boolean | undefined | 选中状态（支持 v-model:checked） |
modelValue | boolean | undefined | 选中状态（支持 v-model） |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
close | () => void | 点击关闭按钮时触发 |
click | (e: MouseEvent) => void | 点击标签时触发 |
change | (checked: boolean) => void | 选中状态变化时触发（checkable 时） |
update:checked | (checked: boolean) => void | 选中状态变化（v-model:checked） |
update:modelValue | (checked: boolean) => void | 选中状态变化（v-model） |
Slots
| 插槽名 | 说明 |
|---|---|
default | 标签内容 |