Badge 徽标

用于展示数字计数、小红点提示或独立状态指示器。

基础用法

⁵¹²⁰

包裹子元素时右上角显示数字徽标

vue

<script setup lang="ts">
import { ABadge, AButton } from "@lite-code/aui-vue";
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap">
    <ABadge :count="5">
      <AButton>消息</AButton>
    </ABadge>
    <ABadge :count="12">
      <AButton>通知</AButton>
    </ABadge>
    <ABadge :count="0" show-zero>
      <AButton>待办</AButton>
    </ABadge>
  </div>
</template>

小红点

链接文字

设置 dot 后仅显示小圆点，不显示数字

vue

<script setup lang="ts">
import { ABadge, AButton } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
    <ABadge dot>
      <AButton>消息</AButton>
    </ABadge>
    <ABadge dot>
      <AButton>通知</AButton>
    </ABadge>
    <ABadge dot>
      <span style="cursor: pointer; color: var(--aui-accent, #6366f1);">链接文字</span>
    </ABadge>
  </div>
</template>

状态徽标

默认（default）处理中（processing）成功（success）警告（warning）错误（error）

无子元素时配合 status 使用，展示独立的状态点

vue

<script setup lang="ts">
import { ABadge } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px;">
    <ABadge status="default"    text="默认（default）" />
    <ABadge status="processing" text="处理中（processing）" />
    <ABadge status="success"    text="成功（success）" />
    <ABadge status="warning"    text="警告（warning）" />
    <ABadge status="error"      text="错误（error）" />
  </div>
</template>

溢出与尺寸

^99+199+8

count 超过 overflowCount 时显示溢出文字，支持 small 尺寸

vue

<script setup lang="ts">
import { ABadge, AButton } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
    <ABadge :count="100">
      <AButton>默认溢出（99+）</AButton>
    </ABadge>
    <ABadge :count="200" :overflow-count="199">
      <AButton>自定义溢出（199+）</AButton>
    </ABadge>
    <ABadge :count="8" size="small">
      <AButton>小尺寸</AButton>
    </ABadge>
  </div>
</template>

API

Props

属性	类型	默认值	说明
count	number	—	显示的数字
overflowCount	number	99	封顶数字，超出后显示 {overflowCount}+
dot	boolean	false	不显示数字，仅显示小红点
status	BadgeStatus	—	独立状态点类型（无子元素时生效）
text	string	—	状态点旁的文字说明
size	BadgeSize	'default'	尺寸：default | small
showZero	boolean	false	count 为 0 时是否显示
offset	[number, number]	—	数字徽标的偏移量 [x, y]（像素）
className	string	—	自定义 class
style	object	—	自定义样式

Slots

插槽	说明
default	被包裹的子元素

类型

type BadgeStatus = 'default' | 'processing' | 'error' | 'warning' | 'success'
type BadgeSize   = 'default' | 'small'