diff --git a/packages/tag/demo/index.vue b/packages/tag/demo/index.vue
index 0f98fa363..3e4aeb13a 100644
--- a/packages/tag/demo/index.vue
+++ b/packages/tag/demo/index.vue
@@ -7,19 +7,26 @@
{{ $t('tag') }}
-
+
{{ $t('tag') }}
{{ $t('tag') }}
{{ $t('tag') }}
{{ $t('tag') }}
-
+
{{ $t('tag') }}
{{ $t('tag') }}
{{ $t('tag') }}
{{ $t('tag') }}
+
+
+ {{ $t('tag') }}
+ {{ $t('tag') }}
+ {{ $t('tag') }}
+ {{ $t('tag') }}
+
@@ -27,12 +34,14 @@
export default {
i18n: {
'zh-CN': {
- title2: '空心样式',
- title3: '圆角样式'
+ plain: '空心样式',
+ round: '圆角样式',
+ customColor: '自定义颜色'
},
'en-US': {
- title2: 'Plain style',
- title3: 'Mark style'
+ plain: 'Plain style',
+ round: 'Mark style',
+ customColor: 'Custom Color'
}
}
};
diff --git a/packages/tag/en-US.md b/packages/tag/en-US.md
index c80e5e30e..b2aaf85d7 100644
--- a/packages/tag/en-US.md
+++ b/packages/tag/en-US.md
@@ -36,6 +36,15 @@ Vue.use(Tag);
Tag
```
+#### Custom Color
+
+```html
+Tag
+Tag
+Tag
+Tag
+```
+
### API
| Attribute | Description | Type | Default |
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 99773d2bf..27c2d8b71 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -7,6 +7,7 @@
}), {
'van-hairline--surround': plain
}]"
+ :style="style"
>
@@ -17,10 +18,23 @@ import create from '../utils/create';
export default create({
name: 'tag',
+
props: {
type: String,
mark: Boolean,
+ color: String,
plain: Boolean
+ },
+
+ computed: {
+ style() {
+ if (this.color) {
+ const key = this.plain ? 'color' : 'backgroundColor';
+ return {
+ [key]: this.color
+ };
+ }
+ }
}
});
diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap
index 074ab0091..880bd0218 100644
--- a/packages/tag/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tag/test/__snapshots__/demo.spec.js.snap
@@ -8,5 +8,7 @@ exports[`renders demo correctly 1`] = `
class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签
标签 标签 标签 标签
+ 标签 标签 标签 标签
`;
diff --git a/packages/tag/zh-CN.md b/packages/tag/zh-CN.md
index 28fe8cc8b..eda684bdd 100644
--- a/packages/tag/zh-CN.md
+++ b/packages/tag/zh-CN.md
@@ -39,13 +39,23 @@ Vue.use(Tag);
标签
```
+#### 自定义颜色
+
+```html
+标签
+标签
+标签
+标签
+```
+
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| type | 类型,可选值为`primary` `success` `danger` | `String` | `''`|
+| color | 自定义标签颜色 | `String` | - |
| plain | 是否为空心样式 | `Boolean` | `false` |
-| mark | 是否为圆角样式 | `Boolean` | `false` |
+| mark | 是否为标记样式 | `Boolean` | `false` |
### Slot