fixed: uni-badge width bug, feat: uni-badge support custom style

Author: Fasttian

docs/components/badge.md

@@ -30,12 +30,13 @@ url : pages/vue/badge/badge
 
 ### Badge Props
 
-|属性名		|类型		|默认值	|说明																											|
-|:-:		|:-:		|:-:	|:-:					 																						|
-|text		|String		|-		|角标内容																										|
-|type		|String		|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
-|size		|String		|normal|Badge 大小，可取值：normal、small|
-|inverted	|Boolean	|false	|是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色														|
+|属性名				|类型		|默认值	|说明																																														|
+|:-:					|:-:		|:-:		|:-:																																														|
+|text					|String	|-			|角标内容																																												|
+|type					|String	|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
+|size					|String	|normal	|Badge 大小，可取值：normal、small																															|
+|custom-style	|String	|				|自定义 Badge 样式																																							|
+|inverted			|Boolean|false	|是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色																			|
 
 ### Badge Events
 

pages/nvue/badge/badge.nvue

@@ -25,6 +25,11 @@
 			<uni-badge class="uni-badge-left-margin" text="45" type="warning" size="small" />
 			<uni-badge class="uni-badge-left-margin" text="123" type="error" size="small" />
 		</view>
+		<uni-section title="自定义样式" type="line"></uni-section>
+		<view class="example-body">
+			<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: #fff;" />
+			<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: red;" />
+		</view>
 	</view>
 </template>
 

pages/vue/badge/badge.vue

@@ -25,6 +25,11 @@
 			<uni-badge class="uni-badge-left-margin" text="45" type="warning" size="small" />
 			<uni-badge class="uni-badge-left-margin" text="123" type="error" size="small" />
 		</view>
+		<uni-section title="自定义样式" type="line"></uni-section>
+		<view class="example-body">
+			<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: #fff;" />
+			<uni-badge class="uni-badge-left-margin" text="2" type="primary" customStyle="background-color: #2C405A; color: red;" />
+		</view>
 	</view>
 </template>
 

uni_modules/uni-badge/changelog.md

@@ -1,2 +1,6 @@
+## 1.0.7（2021-05-07）
+- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
+- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
+- 新增 uni-badge 属性 custom-style， 支持自定义样式
 ## 1.0.6（2021-02-04）
 - 调整为uni_modules目录规范

uni_modules/uni-badge/components/uni-badge/uni-badge.vue

@@ -40,6 +40,10 @@
 			size: {
 				type: String,
 				default: 'normal'
+			},
+			customStyle: {
+				type: String,
+				default: ''
 			}
 		},
 		data() {
@@ -57,7 +61,7 @@
 		},
 		methods: {
 			setStyle() {
-				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
+				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px;` + this.customStyle
 			},
 			onClick() {
 				this.$emit('click');
@@ -71,14 +75,14 @@
 	$bage-small: scale(0.8);
 	$bage-height: 20px;
 
-	.uni-badge {
-		/* #ifndef APP-PLUS */
+	.uni-badge {
+		/* #ifndef APP-NVUE */
 		display: flex;
+		overflow: hidden;
 		box-sizing: border-box;
-		overflow: hidden;
 		/* #endif */
 		justify-content: center;
-		flex-direction: row;
+		flex-direction: row;
 		height: $bage-height;
 		line-height: $bage-height;
 		color: $uni-text-color;
@@ -88,7 +92,6 @@
 		text-align: center;
 		font-family: 'Helvetica Neue', Helvetica, sans-serif;
 		font-size: $bage-size;
-		padding: 0px 6px;
 		/* #ifdef H5 */
 		cursor: pointer;
 		/* #endif */

uni_modules/uni-badge/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-badge",
   "displayName": "uni-badge 数字角标",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
   "keywords": [
     "",

uni_modules/uni-badge/readme.md

@@ -28,12 +28,13 @@
 
 ### Badge Props
 
-|属性名		|类型		|默认值	|说明																											|
-|:-:		|:-:		|:-:	|:-:					 																						|
-|text		|String		|-		|角标内容																										|
-|type		|String		|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
-|size		|String		|normal|Badge 大小，可取值：normal、small|
-|inverted	|Boolean	|false	|是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色														|
+|属性名				|类型		|默认值	|说明																																														|
+|:-:					|:-:		|:-:		|:-:																																														|
+|text					|String	|-			|角标内容																																												|
+|type					|String	|default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
+|size					|String	|normal	|Badge 大小，可取值：normal、small																															|
+|custom-style	|String	|				|自定义 Badge 样式																																							|
+|inverted			|Boolean|false	|是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色																			|
 
 ### Badge Events