Badge 徽章

徽章组件，支持数字、文字、红点、气泡和角标展示

参考 TDesign badge 的样式与形状能力，支持数字、文字、红点、角标展示

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-badge class="demo-badge-item demo-badge-count" :count="5"> <text>消息</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-zero" :count="0"> <text>零</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-show-zero" :count="0" :showZero="true"> <text>显示零</text> </re-badge>

<!-- 最大值 -->
  <re-badge class="demo-badge-item demo-badge-max" :count="100" :maxCount="99"> <text>超过99</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-normal" :count="50" :maxCount="99"> <text>未超过</text> </re-badge>

<!-- 红点模式 -->
  <re-badge class="demo-badge-item demo-badge-dot" :dot="true"> <text>红点</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-dot-count" :dot="true" :count="99"> <text>红点带数值</text> </re-badge>

<!-- 自定义内容 -->
  <re-badge class="demo-badge-item demo-badge-content" content="NEW"> <text>自定义</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-content-hot" content="HOT" color="#e34d59"> <text>热门</text> </re-badge>

<!-- 形状 -->
  <re-badge class="demo-badge-item demo-badge-circle" :count="9" shape="circle"> <text>圆形</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-square" :count="9" shape="square"> <text>方形</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-round" :count="9" shape="round"> <text>兼容 round</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-bubble" count="领积分" shape="bubble"> <text>气泡</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-ribbon" content="NEW" shape="ribbon-left"> <text>左缎带</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-triangle" content="HOT" shape="triangle-right"> <text>三角角标</text> </re-badge>

<!-- 尺寸 -->
  <re-badge class="demo-badge-item demo-badge-size-medium" :count="8" size="medium"> <text>Medium</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-size-large" :count="8" size="large"> <text>Large</text> </re-badge>

<!-- 颜色 -->
  <re-badge class="demo-badge-item demo-badge-red" :count="5" color="#e34d59"> <text>红色</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-green" :count="5" color="#00a870"> <text>绿色</text> </re-badge>
  <re-badge class="demo-badge-item demo-badge-blue" :count="5" color="#0052d9"> <text>蓝色</text> </re-badge>

<!-- 自定义样式 -->
  <re-badge class="demo-badge-item demo-badge-custom-style" :count="8" customStyle="margin-top: 10px;"> <text>自定义样式</text> </re-badge>

<!-- 偏移量 -->
  <re-badge class="demo-badge-item demo-badge-offset" :count="3" :offset="[10, -5]"> <text>偏移</text> </re-badge>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-badge />。

API

Badge Props

名称类型默认值描述必传
countstring | number0徽章数值，可传数字或字符串N
maxCountnumber99最大显示数值，超过显示 maxCount+N
dotbooleanfalse是否显示为红点N
contentstring""自定义徽章内容，优先级高于 count，用于兼容旧用法N
shapestring"circle"徽章形状，支持 circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left，round 会映射为 squareN
colorstring""徽章颜色N
offsetArray<string | number>徽章偏移量 x, y，支持 number、px、rpx、%N
showZerobooleanfalse当数值为 0 时是否显示N
sizestring"medium"尺寸，可选 medium/largeN
customStylestring""自定义样式N

Badge Events

名称参数描述
---

Badge Slots

名称描述
default默认插槽
AvatarCropper 头像裁剪
图片裁剪交互，用于头像裁剪，支持旋转、缩放
Barrage 弹幕
单实例切换不同弹幕场景，保证动画、循环与点击事件都是实际可运行的。