Badge 徽章

在按钮、图标等内容的右上角显示数量或状态，也可以单独作为行内标记。

基础用法

1299+新3 条

1299+新

<template>
  <div class="badge-demo">
    <div class="badge-demo__row">
      <AuBadge :value="12">
        <AuButton>消息</AuButton>
      </AuBadge>
      <AuBadge :value="120" :max="99" type="primary">
        <AuButton>待办</AuButton>
      </AuBadge>
      <AuBadge value="新" type="success">
        <AuButton>功能</AuButton>
      </AuBadge>
      <AuBadge is-dot type="warning">
        <AuButton>更新</AuButton>
      </AuBadge>
      <AuBadge :value="0" :show-zero="false">
        <AuButton>无未读</AuButton>
      </AuBadge>
      <AuBadge :value="3" type="primary">
        <AuButton>通知</AuButton>
        <template #content="{ value }">{{ value }} 条</template>
      </AuBadge>
    </div>
    <div class="badge-demo__row">
      <AuBadge :value="12">
        <AuButton circle title="消息">消</AuButton>
      </AuBadge>
      <AuBadge :value="120" :max="99" type="primary">
        <AuButton circle title="待办">待</AuButton>
      </AuBadge>
      <AuBadge value="新" type="success">
        <AuButton circle title="功能">功</AuButton>
      </AuBadge>
      <AuBadge is-dot type="warning">
        <AuButton circle title="更新">更</AuButton>
      </AuBadge>
      <AuBadge :value="0" :show-zero="false">
        <AuButton circle title="无未读">无</AuButton>
      </AuBadge>
    </div>
  </div>
</template>
<script setup>
import { AuBadge, AuButton } from 'aurora-plus';
</script>
<style scoped>
.badge-demo {
  display: grid;
  gap: 24px;
  padding: 10px;
}
.badge-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
</style>

Badge API

Attributes

属性	说明	类型	默认值
value	标记内容；空字符串时不显示	string / number	''
max	数字超过此值时显示 {max}+	number	99
isDot	显示状态点，优先于内容	boolean	false
hidden	隐藏标记	boolean	false
showZero	值为数字零时是否显示	boolean	true
type	语义色：primary、success、warning、danger、info	string	danger
color	自定义背景色	string	''
offset	相对右上角向左、向下的偏移，单位 px	[number, number]	[0, 0]
badgeClass	标记元素附加类名	string	''
badgeStyle	标记元素附加样式	object	{}

Slots

插槽名	说明
default	被标记的内容；省略时徽章独立显示
content	自定义标记内容，插槽参数为