Badge 徽标

出现在按钮、图标旁的数字或状态标记。

基础用法

使用 value 属性定义显示的数值，通过 type 属性设置不同的类型。

基础用法

最大值

通过 max 属性设置最大值，超过最大值会显示 {max}+。

最大值

小红点

使用 is-dot 属性显示小红点。

小红点

文本内容

value 属性也可以传入字符串来显示文本内容。

文本内容

自定义颜色

通过 color 属性自定义徽标颜色。

自定义颜色

偏移量

通过 offset 属性自定义徽标位置。

偏移量

显示零值

默认情况下，当 value 为 0 时徽标会隐藏，使用 show-zero 属性可以强制显示。

显示零值

自定义内容

使用 #content 插槽自定义徽标内容。

自定义内容

独立使用

不包裹任何内容，可以独立使用。

独立使用

在 Nuxt 中使用

Badge 组件完全支持 Nuxt 3/4 的 SSR 渲染。在服务端渲染时，徽标的内容和位置将直接包含在生成的 HTML 中，确保用户在首屏加载时即可看到实时的通知状态，增强用户体验。

Nuxt 中使用

SSR 注意事项：

• ✅ 初始值（value）、最大值限制（max）在服务端渲染正确
• ✅ 小红点（is-dot）和独立使用模式支持 SSR
• ✅ 自定义颜色 (color) 和偏移量 (offset) 首屏生效
• 💡 动态更新（如通过 WebSocket 实时更新未读数）将在客户端激活后通过响应式系统自动完成

状态同步建议

在 Nuxt 生态中，建议将徽标的数值存储在 useState 或 Pinia 中，以实现跨路由和 SSR -> Client 的状态零成本同步。

API

Props

属性名	说明	类型	默认值
value	显示值	string | number	—
max	最大值，超过显示 {max}+	number	99
is-dot	是否显示小红点	boolean	false
hidden	是否隐藏徽标	boolean	false
type	徽标类型	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	'danger'
show-border	是否显示边框	boolean	true
color	自定义徽标颜色	string	—
offset	徽标偏移量 [x, y]	[number, number]	—
show-zero	当值为 0 时是否显示	boolean	false

Slots

插槽名	说明
default	被徽标包裹的元素
content	自定义徽标内容

主题变量

变量名	说明	默认值
--yh-badge-bg-color	背景颜色	var(--yh-color-danger)
--yh-badge-text-color	文字颜色	#ffffff
--yh-badge-font-size	字体大小	var(--yh-font-size-xs)