[improvement] Tag: add round prop (#1947)

packages/tag/demo/index.vue

@@ -9,12 +9,19 @@
 
     <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 round plain type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag round plain type="primary">{{ $t('tag') }}</van-tag>
       <van-tag plain type="success">{{ $t('tag') }}</van-tag>
     </demo-block>
 
     <demo-block :title="$t('round')">
+      <van-tag round>{{ $t('tag') }}</van-tag>
+      <van-tag round type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag round type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag round type="success">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('mark')">
       <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>
@@ -36,11 +43,13 @@ export default {
     'zh-CN': {
       plain: '空心样式',
       round: '圆角样式',
+      mark: '标记样式',
       customColor: '自定义颜色'
     },
     'en-US': {
       plain: 'Plain style',
-      round: 'Mark style',
+      round: 'Round style',
+      mark: 'Mark style',
       customColor: 'Custom Color'
     }
   }

packages/tag/en-US.md

@@ -27,6 +27,15 @@ Vue.use(Tag);
 <van-tag plain type="success">Tag</van-tag>
 ```
 
+#### Round style
+
+```html
+<van-tag round>Tag</van-tag>
+<van-tag round type="danger">Tag</van-tag>
+<van-tag round type="primary">Tag</van-tag>
+<van-tag round type="success">Tag</van-tag>
+```
+
 #### Mark style
 
 ```html
@@ -51,6 +60,7 @@ Vue.use(Tag);
 |-----------|-----------|-----------|-------------|
 | type | Type, can be set to `primary` `success` `danger` | `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` |
 
 ### Slot

packages/tag/index.vue

@@ -3,7 +3,7 @@
     :class="[b({
       mark,
       plain,
-      [type]: type
+      round
     }), {
       'van-hairline--surround': plain
     }]"
@@ -16,6 +16,13 @@
 <script>
 import create from '../utils/create';
 
+const DEFAULT_COLOR = '#999';
+const COLOR_MAP = {
+  danger: '#f44',
+  primary: '#38f',
+  success: '#06bf04'
+};
+
 export default create({
   name: 'tag',
 
@@ -23,17 +30,15 @@ export default create({
     type: String,
     mark: Boolean,
     color: String,
-    plain: Boolean
+    plain: Boolean,
+    round: Boolean
   },
 
   computed: {
     style() {
-      if (this.color) {
-        const key = this.plain ? 'color' : 'backgroundColor';
-        return {
-          [key]: this.color
-        };
-      }
+      const color = this.color || COLOR_MAP[this.type] || DEFAULT_COLOR;
+      const key = this.plain ? 'color' : 'backgroundColor';
+      return { [key]: color };
     }
   }
 });

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

@@ -2,12 +2,13 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--primary">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span>
-    <span
-      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:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#06bf04;">标签</span> <span class="van-tag" style="background-color:#38f;">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround"
+      style="color:#38f;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#06bf04;">标签</span></div>
+  <div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--round"
+      style="background-color:#06bf04;">标签</span></div>
+  <div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--mark"
+      style="background-color:#06bf04;">标签</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

@@ -30,7 +30,17 @@ Vue.use(Tag);
 ```
 
 #### 圆角样式
-通过`mark`设置为圆角样式
+通过`round`设置为圆角样式
+
+```html
+<van-tag round>标签</van-tag>
+<van-tag round type="danger">标签</van-tag>
+<van-tag round type="primary">标签</van-tag>
+<van-tag round type="success">标签</van-tag>
+```
+
+#### 标记样式
+通过`mark`设置为标记样式(半圆角)
 
 ```html
 <van-tag mark>标签</van-tag>
@@ -55,6 +65,7 @@ Vue.use(Tag);
 | type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
 | color | 自定义标签颜色 | `String` | - |
 | plain | 是否为空心样式 | `Boolean` | `false` |
+| round | 是否为圆角样式 | `Boolean` | `false` |
 | mark | 是否为标记样式 | `Boolean` | `false` |
 
 ### Slot