# Badge 徽标
提示
- 组件会自动定位在子组件的右上角
- 组件可独立使用，自行进行布局定位
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基础用法
通过 <pi-badge> 标签引入，通过 content 属性设置徽标显示的内容。
<pi-badge content="5">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge content="10">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge content="Hot">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge dot>
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 最大值
可通过max 属性设置徽标的最大值，超过的时候会显示${max}+。
<pi-badge max="9" content="999">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge max="20" content="999">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge content="999">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge max="999" content="1000">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 自定义颜色
可通过设置color属性来自定义徽标的颜色。
<pi-badge color="#5072ff" content="5">
<view
class="pi-w-88 pi-h-88 pi-bg-fourth pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge color="#5072ff" content="10">
<view
class="pi-w-88 pi-h-88 pi-bg-fourth pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge color="#5072ff" content="Hot">
<view
class="pi-w-88 pi-h-88 pi-bg-fourth pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
<pi-badge dot color="#5072ff">
<view
class="pi-w-88 pi-h-88 pi-bg-fourth pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
</pi-badge>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 自定义徽标内容
可通过设置content slot 来自定义徽标内容。
<pi-badge>
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
<pi-icon slot="content" name="blod-check" />
</pi-badge>
<pi-badge content="10">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
<pi-icon slot="content" name="close" />
</pi-badge>
<pi-badge content="Hot">
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
<pi-icon slot="content" name="eye" />
</pi-badge>
<pi-badge>
<view
class="pi-w-88 pi-h-88 pi-bg-primary pi-flex-column-center pi-white pi-radius-10"
>
张三
</view>
<pi-icon slot="content" name="setup" />
</pi-badge>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 独立展示
<pi-badge content="20" />
<pi-badge content="40" />
<pi-badge content="60" />
<pi-badge content="120" />
1
2
3
4
2
3
4
# API
# badge Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| customStyle | 自定义样式 | Object | false | - |
| customClass | 自定义样式类 | String | false | - |
| dot | 是否显示图标右上角小红点 | Boolean | false | false |
| dotRadius | 小红点的半径 | String | Number | false | 16rpx |
| content | 徽标的内容 | String | false | '' |
| color | 徽标背景颜色 | String | false | '' |
| max | 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效 | String | Number | false | 99 |
# badge Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| click | - | - |