diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
index 016ba0f01..ce4cac4ec 100644
--- a/src/card/test/__snapshots__/demo.spec.js.snap
+++ b/src/card/test/__snapshots__/demo.spec.js.snap
@@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
商品名称
描述信息
-
diff --git a/src/style/var.less b/src/style/var.less
index a0957a179..7a4773358 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -766,12 +766,15 @@
@tabs-bottom-bar-color: @tabs-default-color;
// Tag
-@tag-padding: 0.2em 0.5em;
-@tag-font-size: @font-size-xs;
-@tag-medium-font-size: @font-size-sm;
-@tag-large-font-size: @font-size-md;
+@tag-padding: 0 @padding-base;
@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;
diff --git a/src/tag/README.md b/src/tag/README.md
index eb36c57e8..4a8a32d45 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -14,7 +14,6 @@ Vue.use(Tag);
### Basic Usage
```html
-
Tag
Tag
Tag
Tag
@@ -24,7 +23,6 @@ Vue.use(Tag);
### Round style
```html
-
Tag
Tag
Tag
Tag
@@ -34,7 +32,6 @@ Vue.use(Tag);
### Mark style
```html
-
Tag
Tag
Tag
Tag
@@ -44,7 +41,6 @@ Vue.use(Tag);
### Plain style
```html
-
Tag
Tag
Tag
Tag
@@ -55,7 +51,6 @@ Vue.use(Tag);
```html
Tag
-
Tag
Tag
Tag
Tag
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index 34b682c6f..f9fc0e99b 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -13,10 +13,9 @@ Vue.use(Tag);
### 基础用法
-通过`type`属性控制标签颜色,默认为灰色
+通过 `type` 属性控制标签颜色。
```html
-
标签
标签
标签
标签
@@ -25,10 +24,9 @@ Vue.use(Tag);
### 圆角样式
-通过`round`设置为圆角样式
+通过 `round` 设置为圆角样式。
```html
-
标签
标签
标签
标签
@@ -37,10 +35,9 @@ Vue.use(Tag);
### 标记样式
-通过`mark`设置为标记样式(半圆角)
+通过 `mark` 设置为标记样式(半圆角)。
```html
-
标签
标签
标签
标签
@@ -49,10 +46,9 @@ Vue.use(Tag);
### 空心样式
-设置`plain`属性设置为空心样式
+设置 `plain` 属性设置为空心样式。
```html
-
标签
标签
标签
标签
@@ -63,7 +59,6 @@ Vue.use(Tag);
```html
标签
-
标签
标签
标签
标签
@@ -79,7 +74,7 @@ Vue.use(Tag);
### 可关闭标签
-添加`closeable`属性表示标签是可关闭的,关闭标签时会触发`close`事件,在`close`事件中可以执行隐藏标签的逻辑
+添加 `closeable` 属性表示标签是可关闭的,关闭标签时会触发 `close` 事件,在 `close` 事件中可以执行隐藏标签的逻辑。
```html
- {{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
@@ -9,7 +8,6 @@
- {{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
@@ -17,7 +15,6 @@
- {{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
@@ -25,7 +22,6 @@
- {{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
@@ -34,7 +30,6 @@
{{ t('tag') }}
- {{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
{{ t('tag') }}
diff --git a/src/tag/index.less b/src/tag/index.less
index b7ebdb053..9f5d3b49c 100644
--- a/src/tag/index.less
+++ b/src/tag/index.less
@@ -1,19 +1,15 @@
@import '../style/var';
.van-tag {
+ position: relative;
display: inline-flex;
align-items: center;
padding: @tag-padding;
color: @tag-text-color;
font-size: @tag-font-size;
- line-height: normal;
+ line-height: @tag-line-height;
border-radius: @tag-border-radius;
- &::after {
- border-color: currentColor;
- border-radius: @tag-border-radius * 2;
- }
-
&--default {
background-color: @tag-default-color;
@@ -56,30 +52,42 @@
&--plain {
background-color: @tag-plain-background-color;
- }
- &--mark {
- padding-right: 0.7em;
-
- &,
- &::after {
- border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
- }
- }
-
- &--round {
- &,
- &::after {
- border-radius: @tag-round-border-radius;
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid currentColor;
+ border-radius: inherit;
+ content: '';
+ pointer-events: none;
}
}
&--medium {
- font-size: @tag-medium-font-size;
+ padding: @tag-medium-padding;
}
&--large {
+ padding: @tag-large-padding;
font-size: @tag-large-font-size;
+ border-radius: @tag-large-border-radius;
+ }
+
+ &--mark {
+ border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
+
+ &::after {
+ display: block;
+ width: 2px;
+ content: '';
+ }
+ }
+
+ &--round {
+ border-radius: @tag-round-border-radius;
}
&__close {
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index 7c0dcd604..f33604ca0 100644
--- a/src/tag/index.tsx
+++ b/src/tag/index.tsx
@@ -1,7 +1,6 @@
// Utils
import { createNamespace } from '../utils';
import { inherit, emit } from '../utils/functional';
-import { BORDER_SURROUND } from '../utils/constant';
// Components
import Icon from '../icon';
@@ -63,7 +62,7 @@ function Tag(
{slots.default?.()}
diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap
index 622597aba..b75a4f8c3 100644
--- a/src/tag/test/__snapshots__/demo.spec.js.snap
+++ b/src/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,11 +2,11 @@
exports[`renders demo correctly 1`] = `
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
+
标签 标签 标签 标签
+
标签 标签 标签 标签
+
标签 标签 标签 标签
+
标签 标签 标签 标签
+
标签 标签 标签 标签
标签 标签 标签
标签