Badge 徽标

用于在图标或文字右上角显示消息数量或状态标记。

基础用法

通过 value 属性设置徽标显示的数字或文本。

消息中心12

待办事项3

<template>
  <ZcBadge :value="12">
    <span
      style="padding: 0 12px; line-height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; display: inline-block;"
      >消息中心</span
    >
  </ZcBadge>
  <ZcBadge :value="3">
    <span
      style="padding: 0 12px; line-height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; display: inline-block;"
      >待办事项</span
    >
  </ZcBadge>
</template>

最大值

通过 max 属性设置最大值，超出显示为 max+。

评论99+

点赞999+

<template>
  <ZcBadge :value="200" :max="99">
    <span
      style="padding: 0 12px; line-height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; display: inline-block;"
      >评论</span
    >
  </ZcBadge>
  <ZcBadge :value="1000" :max="999">
    <span
      style="padding: 0 12px; line-height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; display: inline-block;"
      >点赞</span
    >
  </ZcBadge>
</template>

类型与圆点

通过 type 设置徽标颜色，isDot 显示为小圆点模式。

主要5

成功5

警告5

危险5

信息5

消息提醒

<template>
  <ZcBadge :value="5" type="primary">主要</ZcBadge>
  <ZcBadge :value="5" type="success">成功</ZcBadge>
  <ZcBadge :value="5" type="warning">警告</ZcBadge>
  <ZcBadge :value="5" type="danger">危险</ZcBadge>
  <ZcBadge :value="5" type="info">信息</ZcBadge>
  <ZcBadge is-dot type="danger">消息提醒</ZcBadge>
</template>

隐藏徽标

通过 hidden 属性控制徽标是否隐藏。

通知5

<template>
  <ZcBadge :value="5" :hidden="hidden">
    <span
      style="padding: 0 12px; line-height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; display: inline-block;"
      >通知</span
    >
  </ZcBadge>
  <button @click="hidden = !hidden">{{ hidden ? '显示' : '隐藏' }}徽标</button>
</template>

<script setup>
import { ref } from 'vue'
const hidden = ref(false)
</script>

Badge API

Props

参数	说明	类型	默认值
value	显示值（数字或文本）	string | number	—
max	最大值，超出显示为 max+	number	99
type	徽标类型	primary | success | warning | danger | info	danger
hidden	是否隐藏徽标	boolean	false
isDot	是否显示为小圆点	boolean	false

Slots

插槽名	说明
default	被标记的内容（如按钮、图标等）