# uni-badge-view
数字角标（徽章）组件
badge角标，可以用于显示红点、被红圈或其他颜色圈包裹的数字、文字。提醒用户此时有需要注意的新信息。
# 文件路径
项目下有一个 /pages/uni-ui/badge/badge.uvue 页面，里面演示了badge组件的各种用法。
# 设计
# badge组件有多种用法：
独立显示 如果没有slot内容，视为要显示独立的红点和数字，此时不是角标，就是普通的红点和圆背景数字。 在按钮或列表项的右侧，独立显示数字。也可以显示红点，但这种场景数字更多一些。
作为一个容器组件，包含一个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
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|
| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 | 5.08 |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|
| text | string | undefined | "" | - | badge 的内容。为 "0" 时不显示 badge；为空字符串时显示圆点；有文字则显示文字 |
| badgeStyle | string | undefined | "" | - | badge 的内联样式，用于覆盖内置 style |
| badgeClass | classString | - | - | - |
| alwaysWrapWithContent | boolean | undefined | false | - | 当有 slot 内容时，即使 text 为 "0" 也保留包裹层（badge-wrap），避免多个子 slot 时 flex 方向错乱 |
# Tips
- 该组件在微信小程序端从 hx
5.08起开始支持
