[new feature] Tag: add text-color prop (#2277)

packages/tag/demo/index.vue

@@ -90,6 +90,12 @@
       >
         {{ $t('tag') }}
       </van-tag>
+      <van-tag
+        color="#ffe1e1"
+        text-color="#ad0000"
+      >
+        {{ $t('tag') }}
+      </van-tag>
     </demo-block>
 
     <demo-block :title="$t('customSize')">

packages/tag/en-US.md

@@ -52,6 +52,7 @@ Vue.use(Tag);
 <van-tag color="#f2826a" plain>Tag</van-tag>
 <van-tag color="#7232dd">Tag</van-tag>
 <van-tag color="#7232dd" plain>Tag</van-tag>
+<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
 ```
 
 #### Custom Size
@@ -71,7 +72,9 @@ Vue.use(Tag);
 | color | Custom color | `String` | - |
 | plain | Whether to be plain style | `Boolean` | `false` |
 | round | Whether to be round style | `Boolean` | `false` |
-| mark | Wtether to be mark style | `Boolean` | `false` |
+| mark | Whether to be mark style | `Boolean` | `false` |
+| text-color | Text color | `String` | `white` |
+
 
 ### Slot
 

packages/tag/index.vue

@@ -33,14 +33,21 @@ export default create({
     mark: Boolean,
     color: String,
     plain: Boolean,
-    round: Boolean
+    round: Boolean,
+    textColor: String
   },
 
   computed: {
     style() {
       const color = this.color || COLOR_MAP[this.type] || GRAY_DARK;
       const key = this.plain ? 'color' : 'backgroundColor';
-      return { [key]: color };
+      const style = { [key]: color };
+
+      if (this.textColor) {
+        style.color = this.textColor;
+      }
+
+      return style;
     }
   }
 });

packages/tag/test/__snapshots__/demo.spec.js.snap

@@ -28,6 +28,8 @@ exports[`renders demo correctly 1`] = `
       标签
     </span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#7232dd;">
       标签
+    </span> <span class="van-tag" style="background-color:#ffe1e1;color:#ad0000;">
+      标签
     </span></div>
   <div><span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--medium" style="background-color:#f44;">
       标签

packages/tag/zh-CN.md

@@ -10,6 +10,7 @@ Vue.use(Tag);
 ### 代码演示
 
 #### 基础用法
+
 通过 type 属性控制 Tag 颜色，默认为灰色
 
 ```html
@@ -20,6 +21,7 @@ Vue.use(Tag);
 ```
 
 #### 空心样式
+
 设置`plain`属性设置为空心样式
 
 ```html
@@ -30,6 +32,7 @@ Vue.use(Tag);
 ```
 
 #### 圆角样式
+
 通过`round`设置为圆角样式
 
 ```html
@@ -40,6 +43,7 @@ Vue.use(Tag);
 ```
 
 #### 标记样式
+
 通过`mark`设置为标记样式(半圆角)
 
 ```html
@@ -56,6 +60,7 @@ Vue.use(Tag);
 <van-tag color="#f2826a" plain>标签</van-tag>
 <van-tag color="#7232dd">标签</van-tag>
 <van-tag color="#7232dd" plain>标签</van-tag>
+<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
 ```
 
 #### 标签大小
@@ -72,10 +77,11 @@ Vue.use(Tag);
 |------|------|------|------|------|
 | type | 类型，可选值为`primary` `success` `danger` | `String` | - | - |
 | size | 大小, 可选值为`large` `medium` | `String` | - | 1.3.8 |
-| color | 自定义标签颜色 | `String` | - | 1.3.8 |
+| color | 标签颜色 | `String` | - | 1.3.8 |
 | plain | 是否为空心样式 | `Boolean` | `false` | - |
 | round | 是否为圆角样式 | `Boolean` | `false` | 1.3.8 |
 | mark | 是否为标记样式 | `Boolean` | `false` | - |
+| text-color | 文本颜色，优先级高于`color`属性 | `String` | `white` | 1.4.10 |
 
 ### Slot