[improvement] Tag: add color prop (#1946)

packages/tag/demo/index.vue

@@ -7,19 +7,26 @@
       <van-tag type="primary">{{ $t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('plain')">
       <van-tag plain>{{ $t('tag') }}</van-tag>
       <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
       <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
       <van-tag plain type="success">{{ $t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('round')">
       <van-tag mark>{{ $t('tag') }}</van-tag>
       <van-tag mark type="danger">{{ $t('tag') }}</van-tag>
       <van-tag mark type="primary">{{ $t('tag') }}</van-tag>
       <van-tag mark type="success">{{ $t('tag') }}</van-tag>
     </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
+      <van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
+      <van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
+      <van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -27,12 +34,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '空心样式',
-      title3: '圆角样式'
+      plain: '空心样式',
+      round: '圆角样式',
+      customColor: '自定义颜色'
     },
     'en-US': {
-      title2: 'Plain style',
-      title3: 'Mark style'
+      plain: 'Plain style',
+      round: 'Mark style',
+      customColor: 'Custom Color'
     }
   }
 };

packages/tag/en-US.md

@@ -36,6 +36,15 @@ Vue.use(Tag);
 <van-tag mark type="success">Tag</van-tag>
 ```
 
+#### Custom Color
+
+```html
+<van-tag color="#f2826a">Tag</van-tag>
+<van-tag color="#f2826a" plain>Tag</van-tag>
+<van-tag color="#7232dd">Tag</van-tag>
+<van-tag color="#7232dd" plain>Tag</van-tag>
+```
+
 ### API
 
 | Attribute | Description | Type | Default |

packages/tag/index.vue

@@ -7,6 +7,7 @@
     }), {
       'van-hairline--surround': plain
     }]"
+    :style="style"
   >
     <slot />
   </span>
@@ -17,10 +18,23 @@ import create from '../utils/create';
 
 export default create({
   name: 'tag',
+
   props: {
     type: String,
     mark: Boolean,
+    color: String,
     plain: Boolean
+  },
+
+  computed: {
+    style() {
+      if (this.color) {
+        const key = this.plain ? 'color' : 'backgroundColor';
+        return {
+          [key]: this.color
+        };
+      }
+    }
   }
 });
 </script>

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

@@ -8,5 +8,7 @@ exports[`renders demo correctly 1`] = `
       class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span>
   </div>
   <div><span class="van-tag van-tag--mark">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span></div>
+  <div><span class="van-tag" style="background-color:#f2826a;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f2826a;">标签</span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround"
+      style="color:#7232dd;">标签</span></div>
 </div>
 `;

packages/tag/zh-CN.md

@@ -39,13 +39,23 @@ Vue.use(Tag);
 <van-tag mark type="success">标签</van-tag>
 ```
 
+#### 自定义颜色
+
+```html
+<van-tag color="#f2826a">标签</van-tag>
+<van-tag color="#f2826a" plain>标签</van-tag>
+<van-tag color="#7232dd">标签</van-tag>
+<van-tag color="#7232dd" plain>标签</van-tag>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
+| color | 自定义标签颜色 | `String` | - |
 | plain | 是否为空心样式 | `Boolean` | `false` |
-| mark | 是否为圆角样式 | `Boolean` | `false` |
+| mark | 是否为标记样式 | `Boolean` | `false` |
 
 ### Slot