更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(3.8.5)

e-badge 数字角标

数字角标（徽章）组件，在元素周围展示消息提醒，常用于列表、九宫格、按钮、图标等场景。

特性

• 支持数字角标与小圆点两种形态
• 支持最大值截断（超过 max 显示为 99+）
• 支持五种预设配色 + 自定义颜色
• 支持四个角的位置切换
• 支持直接包裹内容（无需手动定位）

基本用法

<template>
  <view>
    <!-- 包裹内容，角标自动定位到右上角 -->
    <e-badge :value="5">
      <text>消息</text>
    </e-badge>

    <!-- 小圆点形态 -->
    <e-badge :value="1" is-dot>
      <e-icons type="notification" :size="28" />
    </e-badge>

    <!-- 最大值截断，这里显示 99+ -->
    <e-badge :value="1200" :max="99">
      <text>通知</text>
    </e-badge>

    <!-- 自定义颜色与位置 -->
    <e-badge value="new" bg-color="#4cd964" position="bottom-right">
      <text>版本</text>
    </e-badge>
  </view>
</template>

属性

配色主题对照

使用建议

角标值为什么传 0 不显示？

因为业务上「数量为 0」通常等价于「无未读」，此时显示一个 0 反而干扰。如果你确实需要显示 0，传字符串 '0' 即可绕开数字 0 的判定。

给自定义组件加角标

e-badge 通过 position: relative 实现定位，包裹任意内容即可。如果被包裹的元素自身有 overflow: hidden，角标会被裁掉，此时改用 offset 把角标往里收，或在外层再套一个不限溢出的 view。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。