Skip to content

Commit ddf79ce

Browse files
FasttianFasttian
committed
publish uni-badge1.1 - 新增 uni-badge 的 absolute 属性，支持定位
- 新增 uni-badge 的 offset 属性，支持定位偏移 - 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点 - 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+ - 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
1 parent 2e1ab49 commit ddf79ce

File tree

7 files changed

+308
-40
lines changed

7 files changed

+308
-40
lines changed

‎docs/components/badge.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,13 @@ url : pages/vue/badge/badge
2020
在 ``template`` 中使用组件
2121

2222
```html
23+
<uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
24+
<button type="default">右上</button>
25+
</uni-badge>
2326
<uni-badge text="1"></uni-badge>
2427
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
25-
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
28+
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
29+
2630
```
2731

2832

@@ -35,8 +39,12 @@ url : pages/vue/badge/badge
3539
|text |String |- |角标内容 |
3640
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
3741
|size |String |normal |Badge 大小，可取值：normal、small |
38-
|custom-style |String | |自定义 Badge 样式 |
42+
|is-dot |Boolean|false |不展示数字，只有一个小点 |
43+
|max-num |String/Numbuer|99 |展示封顶的数字值，超过 99 显示99+ |
44+
|custom-style |Object | {} |自定义 Badge 样式, 样式对象语法 |
3945
|inverted |Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色 |
46+
|absolute |String| rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） |
47+
|offset |Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）|
4048

4149
### Badge Events
4250

‎pages/nvue/badge/badge.nvue‎

Lines changed: 79 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
<template>
22
<view class="page">
33
<text class="example-info">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
4+
<uni-section title="定位: aboslute 属性 + offset 属性" type="line"></uni-section>
5+
<view class="example-body">
6+
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small" type="primary">
7+
<view class="box"><text class="box-text">右上</text></view>
8+
</uni-badge>
9+
<uni-badge class="uni-badge-absolute" :text="value" absolute="rightTop" :offset="[-10, -10]" size="small"
10+
type="primary">
11+
<view class="box"><text class="box-text">右上+偏移</text></view>
12+
</uni-badge>
13+
<uni-badge class="uni-badge-absolute" size="small" :text="value" absolute="rightBottom" type="primary">
14+
<view class="box"><text class="box-text">右下</text></view>
15+
</uni-badge>
16+
<uni-badge class="uni-badge-absolute" size="small" :text="value" absolute="leftTop" type="primary"
17+
:max-num="10">
18+
<view class="box"><text class="box-text">左上</text></view>
19+
</uni-badge>
20+
</view>
21+
<uni-section title="仅显示点: is-dot 属性" type="line"></uni-section>
22+
<view class="example-body">
23+
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small"
24+
type="primary">
25+
<view class="box"><text class="box-text">圆点</text></view>
26+
</uni-badge>
27+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" :offset="[-5, -5]"
28+
size="small" type="success">
29+
<view class="box"><text class="box-text">圆点+偏移</text></view>
30+
</uni-badge>
31+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" size="small"
32+
type="error">
33+
<view class="box"><text class="box-text">圆点</text></view>
34+
</uni-badge>
35+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" size="small"
36+
type="warning">
37+
<view class="box"><text class="box-text">圆点</text></view>
38+
</uni-badge>
39+
</view>
440
<uni-section title="有底色" type="line"></uni-section>
541
<view class="example-body">
642
<uni-badge class="uni-badge-left-margin" text="1" />
@@ -27,17 +63,33 @@
2763
</view>
2864
<uni-section title="自定义样式" type="line"></uni-section>
2965
<view class="example-body">
30-
<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: #fff;" />
31-
<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: red;" />
32-
</view>
66+
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
67+
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="{color: 'red'}" />
68+
</view>
69+
3370
</view>
3471
</template>
3572

3673
<script>
3774
export default {
3875
components: {},
3976
data() {
40-
return {};
77+
return {
78+
value: 0,
79+
customStyle: {
80+
backgroundColor: '#2C405A',
81+
color: 'red'
82+
}
83+
};
84+
},
85+
mounted() {
86+
const timer = setInterval(() => {
87+
if (this.value >= 199) {
88+
clearInterval(timer)
89+
return
90+
}
91+
this.value++
92+
}, 100)
4193
}
4294
};
4395
</script>
@@ -57,6 +109,28 @@
57109
}
58110

59111
.uni-badge-left-margin {
60-
margin-left: 20rpx;
112+
margin-left: 10px;
113+
}
114+
115+
.uni-badge-absolute {
116+
margin-left: 40px;
117+
}
118+
119+
.box {
120+
width: 40px;
121+
height: 40px;
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
text-align: center;
126+
background-color: #DCDFE6;
127+
color: #fff;
128+
font-size: 12px;
129+
}
130+
131+
.box-text {
132+
text-align: center;
133+
color: #fff;
134+
font-size: 12px;
61135
}
62136
</style>

‎pages/vue/badge/badge.vue‎

Lines changed: 79 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,42 @@
11
<template>
22
<view class="page">
33
<text class="example-info">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
4+
<uni-section title="定位: aboslute 属性 + offset 属性" type="line"></uni-section>
5+
<view class="example-body">
6+
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small" type="primary">
7+
<view class="box"><text class="box-text">右上</text></view>
8+
</uni-badge>
9+
<uni-badge class="uni-badge-absolute" :text="value" absolute="rightTop" :offset="[-10, -10]" size="small"
10+
type="primary">
11+
<view class="box"><text class="box-text">右上+偏移</text></view>
12+
</uni-badge>
13+
<uni-badge class="uni-badge-absolute" size="small" :text="value" absolute="rightBottom" type="primary">
14+
<view class="box"><text class="box-text">右下</text></view>
15+
</uni-badge>
16+
<uni-badge class="uni-badge-absolute" size="small" :text="value" absolute="leftTop" type="primary"
17+
:max-num="10">
18+
<view class="box"><text class="box-text">左上</text></view>
19+
</uni-badge>
20+
</view>
21+
<uni-section title="仅显示点: is-dot 属性" type="line"></uni-section>
22+
<view class="example-body">
23+
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small"
24+
type="primary">
25+
<view class="box"><text class="box-text">圆点</text></view>
26+
</uni-badge>
27+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" :offset="[-5, -5]"
28+
size="small" type="success">
29+
<view class="box"><text class="box-text">圆点+偏移</text></view>
30+
</uni-badge>
31+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" size="small"
32+
type="error">
33+
<view class="box"><text class="box-text">圆点</text></view>
34+
</uni-badge>
35+
<uni-badge class="uni-badge-absolute" :is-dot="true" :text="value" absolute="rightTop" size="small"
36+
type="warning">
37+
<view class="box"><text class="box-text">圆点</text></view>
38+
</uni-badge>
39+
</view>
440
<uni-section title="有底色" type="line"></uni-section>
541
<view class="example-body">
642
<uni-badge class="uni-badge-left-margin" text="1" />
@@ -27,17 +63,33 @@
2763
</view>
2864
<uni-section title="自定义样式" type="line"></uni-section>
2965
<view class="example-body">
30-
<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: #fff;" />
31-
<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: red;" />
32-
</view>
66+
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
67+
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="{color: 'red'}" />
68+
</view>
69+
3370
</view>
3471
</template>
3572

3673
<script>
3774
export default {
3875
components: {},
3976
data() {
40-
return {};
77+
return {
78+
value: 0,
79+
customStyle: {
80+
backgroundColor: '#2C405A',
81+
color: 'red'
82+
}
83+
};
84+
},
85+
mounted() {
86+
const timer = setInterval(() => {
87+
if (this.value >= 199) {
88+
clearInterval(timer)
89+
return
90+
}
91+
this.value++
92+
}, 100)
4193
}
4294
};
4395
</script>
@@ -57,6 +109,28 @@
57109
}
58110
59111
.uni-badge-left-margin {
60-
margin-left: 20rpx;
112+
margin-left: 10px;
113+
}
114+
115+
.uni-badge-absolute {
116+
margin-left: 40px;
117+
}
118+
119+
.box {
120+
width: 40px;
121+
height: 40px;
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
text-align: center;
126+
background-color: #DCDFE6;
127+
color: #fff;
128+
font-size: 12px;
129+
}
130+
131+
.box-text {
132+
text-align: center;
133+
color: #fff;
134+
font-size: 12px;
61135
}
62136
</style>

‎uni_modules/uni-badge/changelog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 1.1.0（2021-05-12）
2+
- 新增 uni-badge 的 absolute 属性，支持定位
3+
- 新增 uni-badge 的 offset 属性，支持定位偏移
4+
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
5+
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
6+
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
17
## 1.0.7（2021-05-07）
28
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
39
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug

0 commit comments

Comments
 (0)