fixed: uni-tag 100% width bug, opti: custom-style attribute

chencanbin · May 10, 2021 · 2e1ab49 · 2e1ab49
1 parent 1c61f4d
commit 2e1ab49
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 63 deletions.
diff --git a/pages/nvue/tag/tag.nvue b/pages/nvue/tag/tag.nvue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view>
 		<text class="example-info">标签组件多用于商品分类、重点内容显示等场景。</text>
 		<uni-section title="实心标签" type="line"></uni-section>
 		<view class="example-body">
@@ -18,6 +18,9 @@
 			<view class="tag-view">
 				<uni-tag text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="空心标签" type="line"></uni-section>
 		<view class="example-body">
@@ -36,6 +39,9 @@
 			<view class="tag-view">
 				<uni-tag :inverted="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :inverted="true" text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="圆角样式" type="line"></uni-section>
 		<view class="example-body">
@@ -51,6 +57,15 @@
 			<view class="tag-view">
 				<uni-tag :inverted="true" :circle="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :inverted="true" :circle="true" text="标签" type="royal" />
+			</view>
+		</view>
+		<uni-section title="自定义样式" type="line"></uni-section>
+		<view class="example-body">
+			<view class="tag-view">
+				<uni-tag text="我是自定义样式标签" custom-style="background-color: #000; color: #fff;"></uni-tag>
+			</view>
 		</view>
 		<uni-section title="标记样式" type="line"></uni-section>
 		<view class="example-body">
@@ -66,6 +81,9 @@
 			<view class="tag-view">
 				<uni-tag :mark="true" :circle="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :mark="true" :circle="true" text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="点击事件" type="line"></uni-section>
 		<view class="example-body">
@@ -143,7 +161,7 @@
 		display: flex;
 		/* #endif */
 		flex-direction: row;
-		justify-content: flex-start;
+		justify-content: flex-start;
 		flex-wrap: wrap;
 		padding: 20rpx;
 	}

diff --git a/pages/vue/tag/tag.vue b/pages/vue/tag/tag.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view>
 		<text class="example-info">标签组件多用于商品分类、重点内容显示等场景。</text>
 		<uni-section title="实心标签" type="line"></uni-section>
 		<view class="example-body">
@@ -18,6 +18,9 @@
 			<view class="tag-view">
 				<uni-tag text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="空心标签" type="line"></uni-section>
 		<view class="example-body">
@@ -36,6 +39,9 @@
 			<view class="tag-view">
 				<uni-tag :inverted="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :inverted="true" text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="圆角样式" type="line"></uni-section>
 		<view class="example-body">
@@ -51,6 +57,15 @@
 			<view class="tag-view">
 				<uni-tag :inverted="true" :circle="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :inverted="true" :circle="true" text="标签" type="royal" />
+			</view>
+		</view>
+		<uni-section title="自定义样式" type="line"></uni-section>
+		<view class="example-body">
+			<view class="tag-view">
+				<uni-tag text="我是自定义样式标签" custom-style="background-color: #000; color: #fff;"></uni-tag>
+			</view>
 		</view>
 		<uni-section title="标记样式" type="line"></uni-section>
 		<view class="example-body">
@@ -66,6 +81,9 @@
 			<view class="tag-view">
 				<uni-tag :mark="true" :circle="true" text="标签" type="error" />
 			</view>
+			<view class="tag-view">
+				<uni-tag :mark="true" :circle="true" text="标签" type="royal" />
+			</view>
 		</view>
 		<uni-section title="点击事件" type="line"></uni-section>
 		<view class="example-body">
@@ -143,7 +161,7 @@
 		display: flex;
 		/* #endif */
 		flex-direction: row;
-		justify-content: flex-start;
+		justify-content: flex-start;
 		flex-wrap: wrap;
 		padding: 20rpx;
 	}

diff --git a/uni_modules/uni-countdown/readme.md b/uni_modules/uni-countdown/readme.md
@@ -50,3 +50,8 @@
 |事件称名	|说明							|返回值	|
 |:-:		|:-:							|:-:		|
 |@timeup|倒计时时间到触发事件	|-			|
+
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
diff --git a/uni_modules/uni-tag/changelog.md b/uni_modules/uni-tag/changelog.md
@@ -1,2 +1,6 @@
+## 1.0.5（2021-05-10）
+- 修复 royal 类型无效的bug
+- 修复 uni-tag 宽度不自适应的bug
+- 新增 uni-tag 支持属性 custom-style 自定义样式
 ## 1.0.4（2021-02-05）
 - 调整为uni_modules目录规范
diff --git a/uni_modules/uni-tag/components/uni-tag/uni-tag.vue b/uni_modules/uni-tag/components/uni-tag/uni-tag.vue
@@ -1,15 +1,5 @@
 <template>
-	<view :class="[
-      'uni-tag--' + type,
-      disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
-      inverted === true || inverted === 'true' ? type + '-uni-tag--inverted' : '',
-      circle === true || circle === 'true' ? 'uni-tag--circle' : '',
-      mark === true || mark === 'true' ? 'uni-tag--mark' : '',
-      'uni-tag--' + size
-    ]"
-	 @click="onClick()" class="uni-tag" v-if="text">
-		<text :class="[type === 'default' ? 'uni-tag--default':'uni-tag-text',inverted === true || inverted === 'true' ? 'uni-tag-text--'+type : '',size === 'small' ? 'uni-tag-text--small':'' ]">{{ text }}</text>
-	</view>
+	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick" ><slot/>{{text}}<slot name="right" /></text>
 </template>
 
 <script>
@@ -71,13 +61,34 @@
 				// 是否为标记样式
 				type: [Boolean, String],
 				default: false
+			},
+			customStyle: {
+				type: String,
+				default: ''
 			}
 		},
-		methods: {
+		computed: {
+			classes() {
+				const { type, disabled, inverted, circle, mark, size, isTrue } = this
+				return [
+					'uni-tag--' + type,
+					isTrue(disabled) ? 'uni-tag--disabled' : '',
+					isTrue(inverted) ? type + '-uni-tag--inverted' : '',
+					isTrue(circle) ? 'uni-tag--circle' : '',
+					isTrue(mark) ? 'uni-tag--mark' : '',
+					'uni-tag--' + size,
+					type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
+					isTrue(inverted) ? 'uni-tag-text--' + type : '',
+					size === 'small' ? 'uni-tag-text--small' : ''
+				]
+			}
+		},
+		methods: {
+			isTrue(value) {
+				return value === true || value === 'true'
+			},
 			onClick() {
-				if (this.disabled === true || this.disabled === "true") {
-					return;
-				}
+				if (this.isTrue(this.disabled)) return
 				this.$emit("click");
 			}
 		}
@@ -90,20 +101,21 @@
 
 	.uni-tag {
 		/* #ifndef APP-NVUE */
-		// display: flex;
-		/* #endif */
+		display: inline-block;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		align-self: flex-start;
+		/* #endif */
 		padding: $tag-pd;
-		height: 30px;
 		line-height: 30px;
-		// justify-content: center;
 		color: $uni-text-color;
 		border-radius: $uni-border-radius-base;
 		background-color: $uni-bg-color-grey;
 		border-width: 1rpx;
 		border-style: solid;
-		border-color: $uni-bg-color-grey;
-		/* #ifdef H5 */
-		cursor: pointer;
+		border-color: $uni-bg-color-grey;
+		/* #ifdef H5 */
+		cursor: pointer;
 		/* #endif */
 	}
 
@@ -119,10 +131,10 @@
 	}
 
 	.uni-tag--disabled {
-		opacity: 0.5;
-		/* #ifdef H5 */
-		cursor: not-allowed;
-		/* #endif */
+		opacity: 0.5;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
 
 	}
 
@@ -136,15 +148,15 @@
 	.uni-tag--default {
 		color: $uni-text-color;
 		font-size: $uni-font-size-base;
-	}
-
-	.uni-tag--royal {
-		color: $uni-text-color;
-		font-size: $uni-font-size-base;
+	}
+
+	.uni-tag--royal {
+		color: $uni-text-color;
+		font-size: $uni-font-size-base;
 	}
 
 	.uni-tag-text--small {
-		font-size: $uni-font-size-sm !important;
+		font-size: $uni-font-size-sm;
 	}
 
 	.uni-tag-text {
@@ -153,24 +165,24 @@
 	}
 
 	.uni-tag-text--primary {
-		color: $uni-color-primary !important;
-	}
+		color: $uni-color-primary;
+	}
 
 	.uni-tag-text--success {
-		color: $uni-color-success !important;
+		color: $uni-color-success;
 	}
 
 	.uni-tag-text--warning {
-		color: $uni-color-warning !important;
+		color: $uni-color-warning;
 	}
 
 	.uni-tag-text--error {
-		color: $uni-color-error !important;
-	}
-
-	.uni-tag-text--royal {
-		color: $uni-color-royal !important;
-	}
+		color: $uni-color-error;
+	}
+
+	.uni-tag-text--royal {
+		color: $uni-color-royal;
+	}
 
 
 	.uni-tag--primary {
@@ -235,22 +247,22 @@
 		border-width: 1rpx;
 		border-style: solid;
 		border-color: $uni-color-error;
-	}
-
-	.uni-tag--royal {
-		color: $uni-text-color-inverse;
-		background-color: $uni-color-royal;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: $uni-color-royal;
-	}
-
-	.royal-uni-tag--inverted {
-		color: $uni-color-royal;
-		background-color: $uni-bg-color;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: $uni-color-royal;
+	}
+
+	.uni-tag--royal {
+		color: $uni-text-color-inverse;
+		background-color: $uni-color-royal;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-color-royal;
+	}
+
+	.royal-uni-tag--inverted {
+		color: $uni-color-royal;
+		background-color: $uni-bg-color;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-color-royal;
 	}
 
 	.uni-tag--inverted {

diff --git a/uni_modules/uni-tag/package.json b/uni_modules/uni-tag/package.json
@@ -1,7 +1,7 @@
 {
   "id": "uni-tag",
   "displayName": "uni-tag 标签",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
   "keywords": [
     "uni-ui",

diff --git a/uni_modules/uni-tag/readme.md b/uni_modules/uni-tag/readme.md
@@ -42,3 +42,8 @@
 |:-:			|:-:							|:-:	|
 |@click		|点击 Tag 触发事件	|-		|
 
+
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag](https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag)