更新记录

1.0.1（2026-04-30） 下载此版本

• 更新文档

1.0.0（2026-04-30） 下载此版本

• 支持 uni-badge-view 组件

平台兼容性

uni-app x(5.0)

其他

badge角标，可以用于显示红点、被红圈或其他颜色圈包裹的数字、文字。提醒用户此时有需要注意的新信息。

Tips

• 该组件在微信小程序端从 hx 5.08 起开始支持

文件路径

项目下有一个 /pages/uni-ui/badge/badge.uvue 页面，里面演示了badge组件的各种用法。

设计

badge组件有多种用法：

1. 独立显示 如果没有slot内容，视为要显示独立的红点和数字，此时不是角标，就是普通的红点和圆背景数字。 在按钮或列表项的右侧，独立显示数字。也可以显示红点，但这种场景数字更多一些。

2. 作为一个容器组件，包含一个slot，在包裹内容的右上角显示一个角标view。 badge组件包裹一个目标view时，badge组件内部的角标view的中心点位于目标view的右上角顶点。 此时角标view是通过transform位移到右上角的，实际内容已经超出了容器本身。 所以需要注意容器的父级的设置，留出超出容器的尺寸（即top和right边距需要留出角标view的高度和宽度的一半），避免被父级裁剪。

badge的text属性的用法：

在badge作为容器组件时，text属性的不同设置，可以代表不同的效果。具体见属性章节。

样式自定义

badge组件的badge-class和badge-style属性，直接作用在角标view上，可以修改角标view的样式。

角标view本质是一个text组件，可以覆盖前景、背景、位置等各种样式。

badge组件有如下属性：

• text 类型为 string|null
  • 值为"0"时，不显示角标；所以永远不会显示一个为0的角标。此时直接显示slot子内容，不包裹外层，减少层级，提高性能；
  • 值为null或""时，代表一个长宽为8px的红色圆点；
  • 否则显示为该文字内容的圆角红底圈套文字。
• badge-class 直接作用于角标view的class
• badge-style 直接作用于角标view的style