diff --git a/src/cell/test/__snapshots__/demo.spec.js.snap b/src/cell/test/__snapshots__/demo.spec.js.snap
index 9c06e61c8..848855113 100644
--- a/src/cell/test/__snapshots__/demo.spec.js.snap
+++ b/src/cell/test/__snapshots__/demo.spec.js.snap
@@ -88,7 +88,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/src/style/var.less b/src/style/var.less
index d50b4aa3f..4d5c49efe 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -571,6 +571,11 @@
@tag-text-color: @white;
@tag-border-radius: .2em;
@tag-round-border-radius: .8em;
+@tag-dander-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-default-color: @gray-dark;
+@tag-plain-background-color: @white;
// Toast
@toast-max-width: 70%;
diff --git a/src/tag/README.md b/src/tag/README.md
index c9dcfac86..356683f3f 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -70,7 +70,7 @@ Vue.use(Tag);
| Attribute | Description | Type | Default |
|------|------|------|------|
-| type | Type, can be set to `primary` `success` `danger` | `String` | - |
+| type | Type, can be set to `primary` `success` `danger` | `String` | `default` |
| size | Size, can be set to `large` `medium` | `String` | - |
| color | Custom color | `String` | - |
| plain | Whether to be plain style | `Boolean` | `false` |
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index e151f4ced..3c3e1c6b6 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -78,7 +78,7 @@ Vue.use(Tag);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
-| type | 类型,可选值为`primary` `success` `danger` | `String` | - | - |
+| type | 类型,可选值为`primary` `success` `danger` | `String` | `default` | - |
| size | 大小, 可选值为`large` `medium` | `String` | - | - |
| color | 标签颜色 | `String` | - | - |
| plain | 是否为空心样式 | `Boolean` | `false` | - |
diff --git a/src/tag/index.less b/src/tag/index.less
index 156302828..1c65cae59 100644
--- a/src/tag/index.less
+++ b/src/tag/index.less
@@ -13,6 +13,42 @@
border-radius: @tag-border-radius * 2;
}
+ &--default {
+ background-color: @tag-default-color;
+
+ &.van-tag--plain {
+ color: @tag-default-color;
+ }
+ }
+
+ &--danger {
+ background-color: @tag-dander-color;
+
+ &.van-tag--plain {
+ color: @tag-dander-color;
+ }
+ }
+
+ &--primary {
+ background-color: @tag-primary-color;
+
+ &.van-tag--plain {
+ color: @tag-primary-color;
+ }
+ }
+
+ &--success {
+ background-color: @tag-success-color;
+
+ &.van-tag--plain {
+ color: @tag-success-color;
+ }
+ }
+
+ &--plain {
+ background-color: @tag-plain-background-color;
+ }
+
&--mark {
padding-right: .6em;
border-radius: 0 .8em .8em 0;
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index 4d9b04f64..aaa13ad9f 100644
--- a/src/tag/index.tsx
+++ b/src/tag/index.tsx
@@ -1,12 +1,11 @@
import { createNamespace } from '../utils';
import { inherit } from '../utils/functional';
-import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
-export type TagType = 'primary' | 'success' | 'danger';
+export type TagType = 'default' | 'primary' | 'success' | 'danger';
export type TagSize = 'large' | 'medium';
@@ -22,21 +21,14 @@ export type TagProps = {
const [createComponent, bem] = createNamespace('tag');
-const COLOR_MAP: { [key: string]: string } = {
- danger: RED,
- primary: BLUE,
- success: GREEN
-};
-
function Tag(
h: CreateElement,
props: TagProps,
slots: DefaultSlots,
ctx: RenderContext
) {
- const { type, mark, plain, round, size } = props;
+ const { type, mark, plain, color, round, size } = props;
- const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
const key = plain ? 'color' : 'backgroundColor';
const style = { [key]: color };
@@ -53,7 +45,7 @@ function Tag(
(Tag);
diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap
index 49e60835c..1ff0333de 100644
--- a/src/tag/test/__snapshots__/demo.spec.js.snap
+++ b/src/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,38 +2,38 @@
exports[`renders demo correctly 1`] = `
-
标签 标签 标签 标签
-
标签
+ 标签 标签 标签 标签
+ 标签
标签
-
+
标签
-
+
标签
- 标签
+ 标签
标签
-
+
标签
-
+
标签
- 标签
+ 标签
标签
-
+
标签
-
+
标签
- 标签
+ 标签
标签
- 标签
+ 标签
标签
-
+
标签
-