refactor(Tag): update tag style (#3465)

example/pages/tag/index.wxml

@@ -1,5 +1,4 @@
 <demo-block title="基础用法" padding>
-  <van-tag class="demo-margin-right">标签</van-tag>
   <van-tag class="demo-margin-right" type="primary">标签</van-tag>
   <van-tag class="demo-margin-right" type="success">标签</van-tag>
   <van-tag class="demo-margin-right" type="danger">标签</van-tag>
@@ -7,7 +6,6 @@
 </demo-block>
 
 <demo-block title="圆角样式" padding>
-  <van-tag class="demo-margin-right" round>标签</van-tag>
   <van-tag class="demo-margin-right" round type="primary">标签</van-tag>
   <van-tag class="demo-margin-right" round type="success">标签</van-tag>
   <van-tag class="demo-margin-right" round type="danger">标签</van-tag>
@@ -15,7 +13,6 @@
 </demo-block>
 
 <demo-block title="标记样式" padding>
-  <van-tag class="demo-margin-right" mark>标签</van-tag>
   <van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
   <van-tag class="demo-margin-right" mark type="success">标签</van-tag>
   <van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
@@ -23,7 +20,6 @@
 </demo-block>
 
 <demo-block title="空心样式" padding>
-  <van-tag class="demo-margin-right" plain>标签</van-tag>
   <van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
   <van-tag class="demo-margin-right" plain type="success">标签</van-tag>
   <van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
@@ -32,7 +28,6 @@
 
 <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 class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
   <van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000"

packages/common/style/var.less

@@ -502,12 +502,15 @@
 @tabs-bottom-bar-color: @tabs-default-color;
 
 // Tag
-@tag-padding: 0.2em 0.5em;
+@tag-padding: 0 @padding-base;
-@tag-font-size: @font-size-xs;
-@tag-medium-font-size: @font-size-sm;
-@tag-large-font-size: @font-size-md;
 @tag-text-color: @white;
-@tag-border-radius: 0.2em;
+@tag-font-size: @font-size-sm;
+@tag-border-radius: 2px;
+@tag-line-height: 16px;
+@tag-medium-padding: 2px 6px;
+@tag-large-padding: @padding-base @padding-xs;
+@tag-large-border-radius: @border-radius-md;
+@tag-large-font-size: @font-size-md;
 @tag-round-border-radius: @border-radius-max;
 @tag-danger-color: @red;
 @tag-primary-color: @blue;

packages/tag/README.md

@@ -14,10 +14,9 @@
 
 ### 基础用法
 
-通过`type`属性控制标签颜色，默认为灰色
+通过 `type` 属性控制标签颜色，默认为灰色。
 
 ```html
-<van-tag>标签</van-tag>
 <van-tag type="primary">标签</van-tag>
 <van-tag type="success">标签</van-tag>
 <van-tag type="danger">标签</van-tag>
@@ -26,10 +25,9 @@
 
 ### 空心样式
 
-设置`plain`属性设置为空心样式
+设置 `plain` 属性设置为空心样式。
 
 ```html
-<van-tag plain>标签</van-tag>
 <van-tag plain type="primary">标签</van-tag>
 <van-tag plain type="success">标签</van-tag>
 <van-tag plain type="danger">标签</van-tag>
@@ -38,10 +36,9 @@
 
 ### 圆角样式
 
-通过`round`设置为圆角样式
+通过 `round` 设置为圆角样式。
 
 ```html
-<van-tag round>标签</van-tag>
 <van-tag round type="primary">标签</van-tag>
 <van-tag round type="success">标签</van-tag>
 <van-tag round type="danger">标签</van-tag>
@@ -50,10 +47,9 @@
 
 ### 标记样式
 
-通过`mark`设置为标记样式(半圆角)
+通过 `mark` 设置为标记样式(半圆角)。
 
 ```html
-<van-tag mark>标签</van-tag>
 <van-tag mark type="primary">标签</van-tag>
 <van-tag mark type="success">标签</van-tag>
 <van-tag mark type="danger">标签</van-tag>
@@ -64,7 +60,6 @@
 
 ```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>
 <van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
@@ -80,7 +75,7 @@
 
 ### 可关闭标签
 
-添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
 
 ```html
 <van-tag
@@ -113,7 +108,6 @@ Page({
       success: true,
     },
   },
-
   onClose(event) {
     this.setData({
       [`show.${event.target.id}`]: false,
@@ -128,13 +122,13 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| type | 类型，可选值为`primary` `success` `danger` `warning` | _string_ | - | - |
+| type | 类型，可选值为 `primary` `success` `danger` `warning` | _string_ | - | - |
-| size | 大小, 可选值为`large` `medium` | _string_ | - | - |
+| size | 大小, 可选值为 `large` `medium` | _string_ | - | - |
 | color | 标签颜色 | _string_ | - | - |
 | plain | 是否为空心样式 | _boolean_ | `false` | - |
 | round | 是否为圆角样式 | _boolean_ | `false` | - |
 | mark | 是否为标记样式 | _boolean_ | `false` | - |
-| text-color | 文本颜色，优先级高于`color`属性 | _string_ | `white` | - |
+| text-color | 文本颜色，优先级高于 `color` 属性 | _string_ | `white` | - |
 | closeable | 是否为可关闭标签 | _boolean_ | `false` |
 
 ### Slot

packages/tag/index.less

@@ -2,19 +2,15 @@
 @import '../common/style/theme.less';
 
 .van-tag {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  line-height: normal;
   .theme(padding, '@tag-padding');
   .theme(color, '@tag-text-color');
   .theme(font-size, '@tag-font-size');
+  .theme(line-height, '@tag-line-height');
   .theme(border-radius, '@tag-border-radius');
 
-  &::after {
-    border-color: currentColor;
-    .theme(border-radius, '@tag-border-radius * 2');
-  }
-
   &--default {
     .theme(background-color, '@tag-default-color');
 
@@ -57,36 +53,49 @@
 
   &--plain {
     .theme(background-color, '@tag-plain-background-color');
-  }
 
-  &--mark {
+    &::before {
-    padding-right: 0.7em;
+      position: absolute;
-
+      top: 0;
-    &,
+      right: 0;
-    &::after {
+      bottom: 0;
-      .theme(
+      left: 0;
-        border-radius,
+      border: 1px solid currentColor;
-        '0 @tag-round-border-radius @tag-round-border-radius 0'
+      border-radius: inherit;
-      );
+      content: '';
-    }
+      pointer-events: none;
-  }
-
-  &--round {
-    &,
-    &::after {
-      .theme(border-radius, '@tag-round-border-radius');
     }
   }
 
   &--medium {
-    .theme(font-size, '@tag-medium-font-size');
+    .theme(padding, '@tag-medium-padding');
   }
 
   &--large {
+    .theme(padding, '@tag-large-padding');
     .theme(font-size, '@tag-large-font-size');
+    .theme(border-radius, '@tag-large-border-radius');
+  }
+
+  &--mark {
+    .theme(
+        border-radius,
+        '0 @tag-round-border-radius @tag-round-border-radius 0'
+      );
+
+    &::after {
+      display: block;
+      width: 2px;
+      content: '';
+    }
+  }
+
+  &--round {
+    .theme(border-radius, '@tag-round-border-radius');
   }
 
   &__close {
+    min-width: 1em;
     margin-left: 2px;
   }
 }

packages/tag/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
+  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
   style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
 >
   <slot />