feat: uni-goods-nav 组件添加角标前景色和背景色 dcloudio#139

Author: mehaotian

src/components/uni-goods-nav/readme.md

@@ -75,18 +75,19 @@ export default {
 
 **options 参数说明：**
 
-|属性名	|类型	|默认值	|说明								|
-|---	|----	|---	|---								|
-|icon	|String	|-		|显示图片，本地绝对路径或线上路径	|
-|text	|String	|-		|显示文字							|
-|info	|Number	|0		|右上角数字角标						|
+|属性名				|类型				|默认值	|说明		|
+|---				|----				|---	|---		|
+|text				|String				|-		|显示文字	|
+|info				|Number				|0		|右上角数字角标|
+|infoBackgroundColor|String				|#ff0000|角标背景色|
+|infoColor			|String				|#fff   |角标前景色|
 
 **buttonGroup 参数说明：**
 
 |属性名				|类型	|默认值	|说明		|
 |---				|----	|---	|---		|
 |text				|String	|-		|按钮文字	|
-|background-color	|String	|-		|按钮背景色	|
+|backgroundColor	|String	|-		|按钮背景色	|
 |color				|String	|-		|字体颜色	|
 
 ### 事件说明

src/components/uni-goods-nav/uni-goods-nav.vue

@@ -5,20 +5,21 @@
 		<view class="uni-tab__cart-box flex">
 			<view class="flex uni-tab__cart-sub-left">
 				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
-					<view class="uni-tab__icon">
+					<view class="uni-tab__icon">
 						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
 						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
 					</view>
 					<text class="uni-tab__text">{{ item.text }}</text>
 					<view class="flex uni-tab__dot-box">
-						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot ">{{ item.info }}</text>
+						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
+						color:item.infoColor?item.infoColor:'#fff'
+						}">{{ item.info }}</text>
 					</view>
 				</view>
 			</view>
 			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
 				<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}"
 				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
-				<!-- <view class="flex uni-tab__cart-button-right uni-tab__color-y ">立即购买</view> -->
 			</view>
 		</view>
 	</view>
@@ -48,7 +49,7 @@
 				default () {
 					return [{
 						icon: 'shop',
-						text: '店铺'
+						text: '店铺',
 					}, {
 						icon: 'cart',
 						text: '购物车'
@@ -131,7 +132,7 @@
 	.uni-tab__right {
 		margin: 5px 0;
 		margin-right: 10px;
-		border-radius: 100px;
+		border-radius: 100px;
 		overflow: hidden;
 	}
 

src/pages/nvue/goods-nav/goods-nav.nvue

@@ -27,15 +27,18 @@
 					text: '客服'
 				}, {
 					icon: 'shop',
-					text: '店铺'
+					text: '店铺',
+					info: 2,
+					infoBackgroundColor:'#007aff',
+					infoColor:"red"
 				}, {
 					icon: 'cart',
 					text: '购物车',
 					info: 2
 				}],
 				buttonGroup: [{
 						text: '加入购物车',
-						backgroundColor: '#ffa200 ',
+						backgroundColor: '#ffa200',
 						color: '#fff'
 					},
 					{

src/pages/vue/goods-nav/goods-nav.vue

@@ -27,15 +27,18 @@
 					text: '客服'
 				}, {
 					icon: 'shop',
-					text: '店铺'
+					text: '店铺',
+					info: 2,
+					infoBackgroundColor:'#007aff',
+					infoColor:"red"
 				}, {
 					icon: 'cart',
 					text: '购物车',
 					info: 2
 				}],
 				buttonGroup: [{
 						text: '加入购物车',
-						backgroundColor: '#ffa200 ',
+						backgroundColor: '#ffa200',
 						color: '#fff'
 					},
 					{