Badge 徽标角标

在图标、头像、按钮或列表右上角展示提示红点、新消息数量或自定义角标标记的微型视觉反馈组件。

---

代码示例

1. 基础数字徽标 (Number Badge)

通过 count（或 content）传入显示的数字或文本。

<template>
  <!-- 按钮右上角未读数 -->
  <mu-badge :count="8">
    <mu-button size="small">未读消息</mu-button>
  </mu-badge>

  <!-- 图标右上角未读数 -->
  <mu-badge :count="3" type="error">
    <mu-icon name="mail" size="28" color="#334155" />
  </mu-badge>
</template>

---

2. 无数字小红点 (Dot Badge)

设置 is-dot（或 dot）开启纯红点提醒模式，适用于消息更新、版本更新提示。

<template>
  <mu-badge dot>
    <mu-icon name="notification" size="28" />
  </mu-badge>

  <mu-badge dot type="success">
    <mu-icon name="wifi" size="28" />
  </mu-badge>
</template>

---

3. 最大上限封顶 (Max Limit)

设置 max 属性（默认 99），当 count 超过 max 时，徽标自动显示为 ${max}+。

<template>
  <!-- 超出 99 显示 99+ -->
  <mu-badge :count="120" :max="99">
    <mu-button size="small">热点消息</mu-button>
  </mu-badge>

  <!-- 超出 9 显示 9+ -->
  <mu-badge :count="10" :max="9">
    <mu-icon name="heart" size="28" color="#F43F5E" />
  </mu-badge>
</template>

---

4. 语义主题类型与自定义色彩 (Types & Custom Background)

支持 error（默认危险红）、warning（警告黄）、success（成功绿）、primary（极奢黑）四种主题类型，也可以通过 background 与 color 自定义任意色彩。

<template>
  <mu-badge :count="5" type="error"><mu-button size="small">Error</mu-button></mu-badge>
  <mu-badge :count="8" type="warning"><mu-button size="small">Warning</mu-button></mu-badge>
  <mu-badge :count="6" type="success"><mu-button size="small">Success</mu-button></mu-badge>
  <mu-badge :count="9" type="primary"><mu-button size="small">Primary</mu-button></mu-badge>
  <mu-badge :count="99" background="#8B5CF6"><mu-button size="small">紫罗兰</mu-button></mu-badge>
</template>

---

5. 位置偏移 (Offset)

使用 offset 属性 [top, right]（单位 rpx）精准自定义角标的微调偏移量。

<template>
  <mu-badge :count="5" :offset="[10, 10]">
    <mu-button size="small" type="primary">右上偏移 10rpx</mu-button>
  </mu-badge>
</template>

---

6. 独立徽标展示 (Standalone)

不包裹任何节点时，可以直接作为独立内联角标显示在文本或列表中。

<template>
  <mu-badge :count="8" type="error" />
  <mu-badge :count="99" type="warning" />
  <mu-badge dot type="error" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
count	徽标展示的数值或文本 (同 content)	Number | String	-	0
content	徽标展示的内容 (别名属性)	Number | String	-	''
max	最大展示上限，超过显示为 max+	Number	-	99
isDot	是否显示为纯红点提醒 (同 dot)	Boolean	true | false	false
dot	是否显示为纯小红点 (别名属性)	Boolean	true | false	false
hidden	是否隐藏徽标角标	Boolean	true | false	false
type	徽标主题语义色彩	String	error | warning | success | primary	'error'
background	自定义徽标背景颜色	String	-	''
color	自定义徽标文字颜色	String	-	''
offset	角标位置微调偏移量 [top, right] (rpx)	Array	-	[0, 0]

---

插槽说明 (Slots)

插槽名	说明
default	触发徽标挂载的目标节点 (如按钮、图标、头像等)