[improvement] Tag: add size prop (#1949)

packages/tag/demo/index.vue

@@ -34,6 +34,12 @@
       <van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
       <van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
     </demo-block>
+
+    <demo-block :title="$t('customSize')">
+      <van-tag type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
+      <van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -44,13 +50,15 @@ export default {
       plain: '空心样式',
       round: '圆角样式',
       mark: '标记样式',
-      customColor: '自定义颜色'
+      customColor: '自定义颜色',
+      customSize: '标签大小'
     },
     'en-US': {
       plain: 'Plain style',
       round: 'Round style',
       mark: 'Mark style',
-      customColor: 'Custom Color'
+      customColor: 'Custom Color',
+      customSize: 'Custom Size'
     }
   }
 };

packages/tag/en-US.md

@@ -54,11 +54,21 @@ Vue.use(Tag);
 <van-tag color="#7232dd" plain>Tag</van-tag>
 ```
 
+#### Custom Size
+
+```html
+<van-tag>Tag</van-tag>
+<van-tag size="medium">Tag</van-tag>
+<van-tag size="large">Tag</van-tag>
+```
+
 ### API
 
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
-| type | Type, can be set to `primary` `success` `danger` | `String` | `''`|
+| type | Type, can be set to `primary` `success` `danger` | `String` | - |
+| size | Size, can be set to `large` `medium` | `String` | - |
+| 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` |

packages/tag/index.vue

@@ -3,7 +3,8 @@
     :class="[b({
       mark,
       plain,
-      round
+      round,
+      [size]: size
     }), {
       'van-hairline--surround': plain
     }]"
@@ -27,6 +28,7 @@ export default create({
   name: 'tag',
 
   props: {
+    size: String,
     type: String,
     mark: Boolean,
     color: String,

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

@@ -11,5 +11,6 @@ exports[`renders demo correctly 1`] = `
       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><span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--medium" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--large" style="background-color:#f44;">标签</span></div>
 </div>
 `;

packages/tag/zh-CN.md

@@ -58,11 +58,20 @@ Vue.use(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` |
 | round | 是否为圆角样式 | `Boolean` | `false` |

packages/vant-css/src/tag.css

@@ -29,4 +29,12 @@
       border-radius: 1.6em;
     }
   }
+
+  &--medium {
+    font-size: 12px;
+  }
+
+  &--large {
+    font-size: 14px;
+  }
 }