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

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

@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-card">
       <a href="javascript:;" class="van-card__thumb">
-        <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-tag--danger van-card__tag">
+        <img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
       标签
     </span></a>
       <div class="van-card__content">

packages/cell/demo/index.vue

@@ -67,10 +67,6 @@ export default {
 .demo-cell {
   .van-cell-text {
     margin-right: 5px;
-  }
-
-  .van-cell-text,
-  .van-tag--danger {
     vertical-align: middle;
   }
 }

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

@@ -86,7 +86,7 @@ exports[`renders demo correctly 1`] = `
         <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
-        <div class="van-cell__title"><span class="van-cell-text">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
+        <div class="van-cell__title"><span class="van-cell-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
         <div class="van-cell__value"><span>内容</span></div>
         <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
           <!---->

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 round plain type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="primary">{{ $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 color = this.color || COLOR_MAP[this.type] || DEFAULT_COLOR;
-        const key = this.plain ? 'color' : 'backgroundColor';
+      const key = this.plain ? 'color' : 'backgroundColor';
-        return {
+      return { [key]: color };
-          [key]: this.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" 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">标签</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>
+  <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"
-    <span
+      style="color:#38f;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#06bf04;">标签</span></div>
-      class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span>
+  <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"
-  </div>
+      style="background-color:#06bf04;">标签</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 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

packages/vant-css/src/tag.css

@@ -1,54 +1,32 @@
 @import './common/var.css';
 
 .van-tag {
-  display: inline-block;
-  padding: 2px 5px;
-  line-height: normal;
-  border-radius: 3px;
-  font-size: 10px;
-  background: $gray;
   color: $white;
+  font-size: 10px;
+  padding: .2em .5em;
+  line-height: normal;
+  border-radius: .2em;
+  display: inline-block;
 
   &::after {
     border-color: currentColor;
-    border-radius: 4px;
+    border-radius: .4em;
   }
 
   &--mark {
-    padding-right: 7px;
+    padding-right: .6em;
-    border-radius: 0 8px 8px 0;
+    border-radius: 0 .8em .8em 0;
 
     &::after {
-      border-radius: 0 16px 16px 0;
+      border-radius: 0 1.6em 1.6em 0;
     }
   }
 
-  &--success {
+  &--round {
-    background: $green;
+    border-radius: .8em;
 
-    &.van-tag--plain {
+    &::after {
-      color: $green;
+      border-radius: 1.6em;
     }
   }
-
-  &--danger {
-    background: $button-danger-background-color;
-
-    &.van-tag--plain {
-      color: $button-danger-background-color;
-    }
-  }
-
-  &--primary {
-    background: $blue;
-
-    &.van-tag--plain {
-      color: $blue;
-    }
-  }
-
-  &--plain {
-    background: $white;
-    color: $gray;
-  }
 }