徽标 Badge

图标右上角的圆形徽标数字或文本前的状态小圆点

何时使用

• 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理

基本使用

5

0

Show Code

<script setup lang="ts">
import { ClockCircleOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <Space>
    <Badge :value="5">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge :value="0" show-zero>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge>
      <template #value>
        <ClockCircleOutlined style="color: #f5222d" />
      </template>
      <Avatar shape="square" size="large" />
    </Badge>
  </Space>
</template>

独立使用

25

4

99+

Show Code

<template>
  <Space>
    <Badge :value="25" />
    <Badge
      :value="4"
      :value-style="{
        backgroundColor: '#fff',
        color: '#999',
        boxShadow: '0 0 0 1px #d9d9d9 inset'
      }"
    />
    <Badge :value="109" :value-style="{ backgroundColor: '#52c41a' }" />
  </Space>
</template>

封顶数字

99

99+

10+

999+

Show Code

<template>
  <Space gap="large">
    <Badge :value="99">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge :value="100">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge :value="99" :max="10">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge :value="1000" :max="999">
      <Avatar shape="square" size="large" />
    </Badge>
  </Space>
</template>

自定义内容

hello

world

Show Code

<template>
  <Space gap="large">
    <Badge value="hello" :value-style="{ backgroundColor: '#1677FF' }">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge>
      <template #value>
        <span class="u-value">world</span>
      </template>
      <Avatar shape="square" size="large" />
    </Badge>
  </Space>
</template>
<style lang="less" scoped>
.u-value {
  display: inline-block;
  line-height: 20px;
  padding: 0 6px;
  background-color: #FAAD14;
  color: #FFF;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #ffffff;
}
</style>

自定义徽标样式

99

hello

Show Code

<template>
  <Space gap="large">
    <Badge :value="99" :value-style="{ backgroundColor: 'magenta' }">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge value="hello" :value-style="{ backgroundColor: 'gold' }">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot :value-style="{ width: '10px', height: '10px', backgroundColor: 'purple' }">
      <Avatar shape="square" size="large" />
    </Badge>
  </Space>
</template>

徽标偏移

9

Show Code

<template>
  <Space gap="large">
    <Badge value="9" :offset="[-20, 10]">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot :offset="[-15, 10]">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot status="success" :offset="['-50%', '30%']">
      <Avatar shape="square" size="large" />
    </Badge>
  </Space>
</template>

小红点

Link something

Show Code

<template>
  <Badge dot>
    <a href="#">Link something</a>
  </Badge>
</template>

状态点

Success

Error

Default

Processing

warning

Show Code

<template>
  <Space>
    <Badge status="success" />
    <Badge status="error" />
    <Badge status="default" />
    <Badge status="processing" />
    <Badge status="warning" />
  </Space>
  <br/>
  <Space style="margin-top: 10px;" vertical>
    <Badge status="success" text="Success" />
    <Badge status="error" text="Error" />
    <Badge status="default" text="Default" />
    <Badge status="processing" text="Processing" />
    <Badge status="warning" text="warning" />
  </Space>
</template>

动态

5

Show Code

<script setup lang="ts">
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue'
const value = ref(5)
const dot = ref(true)
function decline () {
  if (count.value >= 1) {
    count.value--
  }
}
function increase () {
  count.value++
}
</script>
<template>
  <Flex vertical>
    <Space gap="large" align="center">
      <Badge :value="value">
        <Avatar shape="square" size="large" />
      </Badge>
      <Button @click="decline">
        <MinusOutlined />
      </Button>
      <Button @click="increase">
        <PlusOutlined />
      </Button>
    </Space>
    <Space gap="large" align="center">
      <Badge :dot="dot">
        <Avatar shape="square" size="large" />
      </Badge>
      <Switch v-model="dot" />
    </Space>
  </Flex>
</template>

自定义悬浮状态点的显示文字

5

Show Code

<template>
  <Badge :value="5" title="Custom hover text">
    <Avatar shape="square" size="large" />
  </Badge>
</template>

多彩徽标

Presets

pink

red

yellow

orange

cyan

green

blue

purple

geekblue

magenta

volcano

gold

lime

Show Code

<script setup lang="ts">
const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime'
]
</script>
<template>
  <Space>
    <Badge v-for="color in colors" :key="color" :color="color" :text="color" />
  </Space>
</template>

Custom

#f50

#2db7f5

#87d068

#108ee9

Show Code

<template>
  <Space>
    <Badge color="#f50" text="#f50" />
    <Badge color="#2db7f5" text="#2db7f5" />
    <Badge color="#87d068" text="#87d068" />
    <Badge color="#108ee9" text="#108ee9" />
  </Space>
</template>

APIs

Badge

参数	说明	类型	默认值
color	自定义小圆点的颜色，优先级高于 status	PresetColor | string	undefined
value	展示的数字或文字，为数字时大于 max 显示为 max+，为 0 时隐藏	number | string | slot	undefined
max	展示封顶的数字值	number	99
showZero	当数值为 0 时，是否展示 Badge	boolean	false
dot	不展示数字，只有一个小红点	boolean	false
offset	设置状态点的位置偏移，距默认位置左侧、上方的偏移量 [x, y]: [水平偏移, 垂直偏移]	[number | string, number | string]	undefined
status	设置 Badge 为状态点	Status	undefined
text	在设置了 status 的前提下有效，设置状态点的文本	string | slot	undefined
valueStyle	设置徽标的样式	CSSProperties	{}
zIndex	设置徽标的 z-index	number	9
title	设置鼠标放在状态点上时显示的文字	string	undefined
ripple	是否开启涟漪动画效果	boolean	true

PresetColor Type

名称	值
PresetColor	'pink' | 'red' | 'yellow' | 'orange' | 'cyan' | 'green' | 'blue' | 'purple' | 'geekblue' | 'magenta' | 'volcano' | 'gold' | 'lime'

Status Type

名称	值
Status	'success' | 'processing' | 'default' | 'error' | 'warning'

Slots

名称	说明	类型
default	自定义内容元素	v-slot:default
value	自定义徽标数字或文字	v-slot:value