更新记录

1.0.0（2025-12-07） 下载此版本

appx-badge 是基于 uni-app x 开发的通用角标组件，支持数值展示、圆点模式、自定义样式及位置偏移等功能，可灵活挂载在任意元素上，适用于消息提醒、数量标识等业务场景。

平台兼容性

uni-app x(4.87)

appx-badge 角标组件帮助文档

组件介绍

appx-badge 是基于 uni-app x 开发的通用角标组件，支持数值展示、圆点模式、自定义样式及位置偏移等功能，可灵活挂载在任意元素上，适用于消息提醒、数量标识等业务场景。

组件特性

1. 支持数值模式（超过阈值显示 阈值+）和圆点模式（无数字）；
2. 自定义角标背景色、文字色、尺寸、圆角、字体大小；
3. 支持四个方位（左上/右上/左下/右下）定位，且可配置偏移量；
4. 支持点击事件、溢出行为控制；
5. 样式隔离，适配 inline-block 布局，垂直居中对齐。

使用方式

基础引入

<template>
  <view>
    <!-- 数值角标 -->
    <appx-badge value="12">
      <button>消息</button>
    </appx-badge>

    <!-- 圆点角标 -->
    <appx-badge isDot>
      <button>通知</button>
    </appx-badge>
  </view>
</template>

<script lang="uts" setup>
</script>

完整示例

<template>
  <view>
    <!-- 自定义样式+点击事件 -->
    <appx-badge 
      value="120"
      maxCount="999"
      bgColor="#409eff"
      color="#fff"
      size="18px"
      position="top-left"
      offsetX="-2px"
      offsetY="-2px"
      clickable
      @click="handleBadgeClick"
    >
      <image src="/static/icon.png" style="width: 40px; height: 40px;" />
    </appx-badge>
  </view>
</template>

<script lang="uts" setup>
import appxBadge from '@/components/appx-badge/appx-badge.vue';

const handleBadgeClick = () => {
  console.log('角标被点击');
};
</script>

属性说明

事件说明

样式说明

1. 组件容器为 inline-block 布局，垂直居中对齐，默认相对定位；
2. 角标默认使用 CSS 变量控制样式，优先级：customStyle > 内置属性 > 默认值；
3. 圆点模式下，角标宽高强制等于 size，无内边距，圆角为 50%；
4. 角标文字默认不换行，超出 80px 时显示省略号。

注意事项

1. value 为非数字类型时，数值模式角标不显示；
2. maxCount 为非数字类型时，默认按 99 处理；
3. 偏移量建议使用 px/rpx 单位，无单位时默认补 px；
4. 若角标被遮挡，可调整 z-index（通过 customStyle 设置）；
5. 容器 overflow 设置为 hidden 时，可能导致角标超出部分被裁剪。