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