# Badge 徽标

提示

  1. 组件会自动定位在子组件的右上角
  2. 组件可独立使用,自行进行布局定位

# 平台差异说明

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

# 最大值

可通过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

# 自定义颜色

可通过设置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

# 自定义徽标内容

可通过设置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

# 独立展示

<pi-badge content="20" />
<pi-badge content="40" />
<pi-badge content="60" />
<pi-badge content="120" />
1
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 - -
Last updated: 2022/12/12 上午9:58:28
10:44