xiaoye-components

Appearance

Badge 徽章 ​

xy-badge 适合消息数、待办数量、状态提醒和角标标记。它既可以独立显示，也可以附着在按钮、标签或文本上。

何时使用 ​

  • 需要在图标、头像或按钮旁显示未读消息数、待办数量等数值提示。
  • 需要用小圆点标记"有新内容""在线"等状态，但不需显示具体数字。
  • 需要在标签或卡片角落展示状态标记（如"新""热""Beta"）。

何时不使用 ​

  • 需要展示大量文本或复杂内容时，优先使用 xy-tag 或 xy-tooltip。
  • 需要可交互的筛选标签时，优先使用 xy-tag 的 closable 模式。
  • 需要全局消息提醒时，优先使用 xy-message 或 xy-notification。

最佳实践 ​

数值徽章 vs 点状徽章 ​

场景推荐方式
有具体数量（未读消息 5 条）数值型 value
只需标记"有新内容"点状 is-dot
数量可能很大配合 max 显示 99+
数量为 0 时不应显示传 :show-zero="false"（默认显示）

徽章与宿主元素 ​

vue
<xy-badge :value="3">
  <xy-button>消息</xy-button>
</xy-badge>

建议始终将 Badge 包裹在语义明确的宿主元素上，避免 Badge 悬空无参照。

基础用法 ​

数值型徽章最适合消息提醒、未读数和任务数量。

基础用法消息计数

徽章用于显示未读消息数量或状态标记，常用于通知按钮。

12
3
1
8

最大值与隐藏零值 ​

max 和 show-zero 适合做通知数、待办数这类有上限表达的场景。

99+
0
0

自定义内容与颜色 ​

支持文字徽章、自定义颜色，以及通过 content 插槽自定义内容结构。

版本动态new
热门话题hot
99

点状徽章 ​

is-dot 适合状态提醒、在线标记和轻量提示。

即时消息
自定义状态

偏移量 ​

offset 用于精细微调徽章与宿主元素的相对位置。

1

API ​

Badge Attributes ​

属性说明类型默认值
value显示值string | number''
max最大值，超出时显示 {max}+number99
is-dot是否显示为小圆点booleanfalse
hidden是否隐藏徽章booleanfalse
type徽章类型BadgeType'danger'
show-zero值为 0 时是否显示booleantrue
color自定义背景色string''
badge-style自定义徽章样式StyleValue—
offset徽章偏移量 [x, y][number, number][0, 0]
badge-class自定义徽章类名string''

Badge Slots ​

插槽说明
default宿主内容
content自定义徽章内容，接收 BadgeContentSlotProps

Badge Exposes ​

暴露项说明类型
content计算后的徽章值BadgeInstance["content"]