徽章 Badge

用于在目标元素（如图标、按钮、列表项等）上显示状态或数量提示的轻量型组件。

基础用法

通过 count 属性设置徽章的数值，当数值超过 max-count 时显示为 max-count+。

5

99+

<template>
  <bp-space :size="32">
    <bp-badge :count="5">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="100" :max-count="99">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="0">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

状态

支持 5 种状态类型：gray - 灰度，primary - 主要（默认），success - 成功，warning - 警示，danger - 危险。

5

3

1

99

2

<template>
  <bp-space :size="32">
    <bp-badge :count="5" status="primary">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="3" status="success">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="1" status="warning">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="99" status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="2" status="gray">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

小圆点

设置 dot 属性以不展示数字，只显示一个小圆点。

<template>
  <bp-space :size="32">
    <bp-badge dot status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="success">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="warning">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="primary">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

自定义文本

通过 text 属性自定义徽章显示的文本内容。

NEW

HOT

<template>
  <bp-space :size="32">
    <bp-badge text="NEW">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge text="HOT" status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

Badge 属性

text	自定义徽章文本，设置后忽略 count	String	-	-
count	徽章数值	Number	-	-
max-count	最大显示数值，超出显示为 max-count+	Number	99	-
dot	是否显示为小圆点	Boolean	-	-
status	徽章状态类型	String	primary	-
offset	徽章偏移量 [top, right]	Array	[-2, -6]	-

Badge 插槽

default

徽章附着的内容

-

-