Tag 标签
用于标记和选择。
基础用法
使用 type 属性来定义标签的类型。
标签一标签二标签三标签四标签五
基础用法
主题效果
Tag 组件提供了三种主题效果：dark、light（默认）、plain。
Dark:标签一标签二标签三标签四标签五
Light:标签一标签二标签三标签四标签五
Plain:标签一标签二标签三标签四标签五
主题效果
可关闭标签
使用 closable 属性可以定义一个可关闭的标签。点击关闭按钮会触发 close 事件。
标签一标签二标签三标签四标签五
可关闭标签
动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。
Tag 1Tag 2Tag 3
动态编辑标签
可选中标签
使用 checkable 属性可以定义一个可选中的标签，配合 v-model:checked 使用。
标签一标签二标签三
选中状态: [ true, false, false ]
可选中标签
不同尺寸
使用 size 属性来控制标签的大小。
LargeDefaultSmallLargeDefaultSmall
不同尺寸
圆形标签
使用 round 属性可以让标签变成圆形。
标签一标签二标签三标签四标签五
圆形标签
自定义颜色
使用 color 属性可以自定义标签的颜色。
自定义紫色自定义橙色自定义青色自定义粉色自定义蓝绿色
自定义颜色
图标配置
使用 icon 属性或 #icon 插槽可以配置左侧图标，使用 suffix-icon 属性或 #suffixIcon 插槽可以配置右侧图标。
图标配置
在 Nuxt 中使用
Tag 组件完全支持 Nuxt 3/4 环境下的 SSR 渲染。由于其轻量级的设计，非常适合在 Nuxt 项目中用于状态展示、分类标记等场景。
Nuxt 自动导入NuxtVueVite
Nuxt 中使用
SSR 注意事项：
- ✅ 所有类型 (type)、尺寸 (size) 和主题效果 (effect) 均在服务端离线生成 HTML
- ✅ 自定义颜色 (color) 和圆角 (round) 支持 SSR
- ✅ 前后缀图标插槽在服务端正确填充
- 💡 交互事件（如点击关闭、动态编辑切换）在客户端激活（Hydration）后生效
极致轻量
Tag 组件的 CSS 经过高度原子化优化，生成在 SSR 页面中的额外样式负荷极低，是 Nuxt 极致性能优化的理想选择。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 标签类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'primary' |
| size | 标签尺寸 | 'large' | 'default' | 'small' | 'default' |
| effect | 主题效果 | 'dark' | 'light' | 'plain' | 'light' |
| closable | 是否可关闭 | boolean | false |
| round | 是否为圆形 | boolean | false |
| color | 自定义背景颜色 | string | — |
| hit | 是否有边框描边 | boolean | false |
| disable-transitions | 是否禁用渐变动画 | boolean | false |
| checkable | 是否可选中 | boolean | false |
| checked / v-model:checked | 是否选中 | boolean | false |
| editable | 是否可编辑（双击编辑） | boolean | false |
| icon | 左侧图标 | Component | — |
| suffix-icon | 右侧图标 | Component | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击标签时触发 | (event: MouseEvent) => void |
| close | 点击关闭按钮时触发 | (event: MouseEvent) => void |
| update:checked | 选中状态变化时触发 | (checked: boolean) => void |
| change | 选中状态变化时触发 | (checked: boolean) => void |
| edit | 编辑完成时触发 | (value: string) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 标签内容 |
| icon | 自定义左侧图标 |
| suffix-icon | 自定义右侧图标 |
| close-icon | 自定义关闭图标 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-tag-font-size | 字体大小 | var(--yh-font-size-xs) |
--yh-tag-border-radius | 圆角大小 | var(--yh-radius-sm) |
--yh-tag-bg-color | 背景颜色 | (根据类型变化) |
--yh-tag-border-color | 边框颜色 | (根据类型变化) |
--yh-tag-text-color | 文字颜色 | (根据类型变化) |