[improvement] Tag: add round、size、color props (#791)

docs/src/Preview.vue

@@ -41,7 +41,7 @@ const MAP = {
   'switch-cell': 'switch-cell-201808221124.png',
   'submit-bar': 'submit-bar-a-201809271357.png',
   tab: 'tab-20181015.png',
-  tag: 'tag-201808092138.png',
+  tag: 'tag-20181019.jpeg',
   tabbar: 'tabbar-201808160922.png',
   toast: 'toast-201808191046.png',
   transition: 'transition-20180821.png',

example/pages/tag/index.wxml

@@ -1,20 +1,40 @@
 <demo-block title="基础用法" padding>
-  <van-tag custom-class="demo-margin-right">标签</van-tag>
+  <van-tag class="demo-margin-right">标签</van-tag>
-  <van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" type="danger">标签</van-tag>
-  <van-tag custom-class="demo-margin-right" type="success">标签</van-tag>
+  <van-tag class="demo-margin-right" type="success">标签</van-tag>
   <van-tag type="primary">标签</van-tag>
 </demo-block>
 
 <demo-block title="空心样式" padding>
-  <van-tag custom-class="demo-margin-right" plain>标签</van-tag>
+  <van-tag class="demo-margin-right" plain>标签</van-tag>
-  <van-tag custom-class="demo-margin-right" plain type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
-  <van-tag custom-class="demo-margin-right" plain type="primary">标签</van-tag>
+  <van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
   <van-tag plain type="success">标签</van-tag>
 </demo-block>
 
 <demo-block title="圆角样式" padding>
-  <van-tag custom-class="demo-margin-right" mark>标签</van-tag>
+  <van-tag class="demo-margin-right" round>标签</van-tag>
-  <van-tag custom-class="demo-margin-right" mark type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" round type="danger">标签</van-tag>
-  <van-tag custom-class="demo-margin-right" mark type="primary">标签</van-tag>
+  <van-tag class="demo-margin-right" round type="primary">标签</van-tag>
+  <van-tag round type="success">标签</van-tag>
+</demo-block>
+
+<demo-block title="标记样式" padding>
+  <van-tag class="demo-margin-right" mark>标签</van-tag>
+  <van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
   <van-tag mark type="success">标签</van-tag>
 </demo-block>
+
+<demo-block title="自定义颜色" padding>
+  <van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
+  <van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
+  <van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
+  <van-tag color="#7232dd" plain>标签</van-tag>
+</demo-block>
+
+<demo-block title="标签大小" padding>
+  <van-tag class="demo-margin-right" type="danger">标签</van-tag>
+  <van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
+  <van-tag type="danger" size="large">标签</van-tag>
+</demo-block>

packages/tag/README.md

@@ -32,7 +32,17 @@
 ```
 
 #### 圆角样式
-通过`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>
@@ -41,13 +51,33 @@
 <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>
+```
+
+#### 标签大小
+
+```html
+<van-tag>标签</van-tag>
+<van-tag size="medium">标签</van-tag>
+<van-tag size="large">标签</van-tag>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
+| type | 类型，可选值为`primary` `success` `danger` | `String` | - |
+| size | 大小, 可选值为`large` `medium` | `String` | - |
+| color | 自定义标签颜色 | `String` | - |
 | plain | 是否为空心样式 | `Boolean` | `false` |
-| mark | 是否为圆角样式 | `Boolean` | `false` |
+| round | 是否为圆角样式 | `Boolean` | `false` |
+| mark | 是否为标记样式 | `Boolean` | `false` |
 
 ### Slot
 

packages/tag/index.less

@@ -1,54 +1,40 @@
 @import '../common/style/var.less';
 
 .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 {
+  &--medium {
-    background: @button-danger-background-color;
+    font-size: 12px;
-
-    &.van-tag--plain {
-      color: @button-danger-background-color;
-    }
   }
 
-  &--primary {
+  &--large {
-    background: @blue;
+    font-size: 14px;
-
-    &.van-tag--plain {
-      color: @blue;
-    }
-  }
-
-  &--plain {
-    background: @white;
-    color: @gray;
   }
 }

packages/tag/index.ts

@@ -1,9 +1,38 @@
 import { VantComponent } from '../common/component';
 
+const DEFAULT_COLOR = '#999';
+const COLOR_MAP = {
+  danger: '#f44',
+  primary: '#38f',
+  success: '#06bf04'
+};
+
 VantComponent({
   props: {
+    size: String,
     type: String,
     mark: Boolean,
-    plain: Boolean
+    color: String,
+    plain: Boolean,
+    round: Boolean
+  },
+
+  computed: {
+    classes() {
+      const { data } = this;
+      return this.classNames('van-tag', 'custom-class', {
+        'van-tag--mark': data.mark,
+        'van-tag--plain': data.plain,
+        'van-tag--round': data.round,
+        [`van-tag--${data.size}`]: data.size,
+        'van-hairline--surround': data.plain
+      });
+    },
+
+    style() {
+      const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
+      const key = this.data.plain ? 'color' : 'background-color';
+      return `${key}: ${color}`;
+    }
   }
 });

packages/tag/index.wxml

@@ -1,5 +1,3 @@
-<view
+<view class="{{ classes }}" style="{{ style }}">
-  class="van-tag custom-class {{ mark ? 'van-tag--mark' : '' }} {{ plain ? 'van-tag--plain van-hairline--surround' : '' }} {{ type ? 'van-tag--' + type : '' }}"
->
   <slot />
 </view>