Skip to content

Badge 徽标

基础用法

设置 value 属性后,会在子元素的右上角显示对应的徽标,也可以通过 dot 来显示点。

html
<template>
  <ABadge value="99+">
    <div class="h-12 w-12 rounded-lg bg-gray3" />
  </ABadge>
  <ABadge dot>
    <div class="h-12 w-12 rounded-lg bg-gray3" />
  </ABadge>
</template>
<template>
  <ABadge value="99+">
    <div class="h-12 w-12 rounded-lg bg-gray3" />
  </ABadge>
  <ABadge dot>
    <div class="h-12 w-12 rounded-lg bg-gray3" />
  </ABadge>
</template>

API

Props

参数说明类型默认值
value显示值string | number-
max最大值,超过最大值会显示 {max}+,仅在 valuenumber 时有效number-
dot小圆点booleanfalse

Events

事件名说明回调参数

Slots

名称说明
default自定义内容
value自定义显示值

MIT Licensed