fix(tag): 修复 plain 与其他 prop 组合使用时未生效问题 #1472 (#1530)

src/packages/__VUE/tag/index.scss

@@ -8,30 +8,50 @@
     color: $tag-default-color;
     background: $tag-default-background-color;
     border: $tag-border-width solid transparent;
+    &.nut-tag--plain {
+      color: $tag-default-background-color;
+      border: $tag-border-width solid $tag-default-background-color;
+    }
   }
 
   &--primary {
     color: $tag-default-color;
     background: $tag-primary-background-color;
     border: $tag-border-width solid transparent;
+    &.nut-tag--plain {
+      color: $tag-primary-background-color;
+      border: $tag-border-width solid $tag-primary-background-color;
+    }
   }
 
   &--success {
     color: $tag-default-color;
     background: $tag-success-background-color;
     border: $tag-border-width solid transparent;
+    &.nut-tag--plain {
+      color: $tag-success-background-color;
+      border: $tag-border-width solid $tag-success-background-color;
+    }
   }
 
   &--danger {
     color: $tag-default-color;
     background: $tag-danger-background-color;
     border: $tag-border-width solid transparent;
+    &.nut-tag--plain {
+      color: $tag-danger-background-color-plain;
+      border: $tag-border-width solid $tag-danger-background-color-plain;
+    }
   }
 
   &--warning {
     color: $tag-default-color;
     background: $tag-warning-background-color;
     border: $tag-border-width solid transparent;
+    &.nut-tag--plain {
+      color: $tag-warning-background-color;
+      border: $tag-border-width solid $tag-warning-background-color;
+    }
   }
 
   &--round {

src/packages/__VUE/tag/index.taro.vue

@@ -54,23 +54,18 @@ export default create({
 
     const getStyle = (): CSSProperties => {
       const style: CSSProperties = {};
-      if (color?.value) {
-        return {
-          background: color.value,
-          color: textColor.value
-        };
+      if (textColor.value) {
+        style.color = textColor.value;
+      } else if (color.value && plain.value) {
+        style.color = color.value;
       }
       if (plain.value) {
-        return {
-          color: '#FA2400',
-          background: '#fff',
-          border: '1px solid rgba(250,36,0,1)'
-        };
+        style.background = '#fff';
+        style['border-color'] = color.value;
+      } else if (color.value) {
+        style.background = color.value;
       }
-      return {
-        color: '',
-        background: ''
-      };
+      return style;
     };
 
     const onClose = (event: MouseEvent) => {

src/packages/__VUE/tag/index.vue

@@ -50,25 +50,23 @@ export default create({
       };
     });
 
+    // 综合考虑 textColor、color、plain 组合使用时的效果
     const getStyle = (): CSSProperties => {
       const style: CSSProperties = {};
-      if (color?.value) {
-        return {
-          background: color.value,
-          color: textColor.value
-        };
+      // 标签内字体颜色
+      if (textColor.value) {
+        style.color = textColor.value;
+      } else if (color.value && plain.value) {
+        style.color = color.value;
       }
+      // 标签背景与边框颜色
       if (plain.value) {
-        return {
-          color: '#FA2400',
-          background: '#fff',
-          border: '1px solid rgba(250,36,0,1)'
-        };
+        style.background = '#fff';
+        style['border-color'] = color.value;
+      } else if (color.value) {
+        style.background = color.value;
       }
-      return {
-        color: '',
-        background: ''
-      };
+      return style;
     };
 
     const onClose = (event: MouseEvent) => {

src/packages/styles/variables-jdb.scss

@@ -564,6 +564,7 @@ $tag-danger-background-color: linear-gradient(
   rgba(232, 34, 14, 1) 69.83950099728881%,
   rgba(242, 77, 12, 1) 100%
 ) !default;
+$tag-danger-background-color-plain: #df3526 !default;
 $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;

src/packages/styles/variables-jdt.scss

@@ -470,6 +470,7 @@ $tag-danger-background-color: linear-gradient(
   rgba(232, 34, 14, 1) 69.83950099728881%,
   rgba(242, 77, 12, 1) 100%
 ) !default;
+$tag-danger-background-color-plain: #df3526 !default;
 $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;

src/packages/styles/variables.scss

@@ -495,6 +495,7 @@ $tag-danger-background-color: linear-gradient(
   rgba(232, 34, 14, 1) 69.83950099728881%,
   rgba(242, 77, 12, 1) 100%
 ) !default;
+$tag-danger-background-color-plain: #df3526 !default;
 $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;