diff --git a/packages/tag/demo/index.vue b/packages/tag/demo/index.vue index 7b2c2c64a..780f8eaca 100644 --- a/packages/tag/demo/index.vue +++ b/packages/tag/demo/index.vue @@ -90,6 +90,12 @@ > {{ $t('tag') }} + + {{ $t('tag') }} + diff --git a/packages/tag/en-US.md b/packages/tag/en-US.md index 2414a5c62..a32e3c11b 100644 --- a/packages/tag/en-US.md +++ b/packages/tag/en-US.md @@ -52,6 +52,7 @@ Vue.use(Tag); Tag Tag Tag +Tag ``` #### Custom Size @@ -71,7 +72,9 @@ Vue.use(Tag); | color | Custom color | `String` | - | | plain | Whether to be plain style | `Boolean` | `false` | | round | Whether to be round style | `Boolean` | `false` | -| mark | Wtether to be mark style | `Boolean` | `false` | +| mark | Whether to be mark style | `Boolean` | `false` | +| text-color | Text color | `String` | `white` | + ### Slot diff --git a/packages/tag/index.vue b/packages/tag/index.vue index 3d4a76418..c17265414 100644 --- a/packages/tag/index.vue +++ b/packages/tag/index.vue @@ -33,14 +33,21 @@ export default create({ mark: Boolean, color: String, plain: Boolean, - round: Boolean + round: Boolean, + textColor: String }, computed: { style() { const color = this.color || COLOR_MAP[this.type] || GRAY_DARK; const key = this.plain ? 'color' : 'backgroundColor'; - return { [key]: color }; + const style = { [key]: color }; + + if (this.textColor) { + style.color = this.textColor; + } + + return style; } } }); diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap index bb078d582..9d651fa66 100644 --- a/packages/tag/test/__snapshots__/demo.spec.js.snap +++ b/packages/tag/test/__snapshots__/demo.spec.js.snap @@ -28,6 +28,8 @@ exports[`renders demo correctly 1`] = ` 标签 标签 标签 + + 标签
标签 标签 diff --git a/packages/tag/zh-CN.md b/packages/tag/zh-CN.md index 3595dec9b..037b189cc 100644 --- a/packages/tag/zh-CN.md +++ b/packages/tag/zh-CN.md @@ -10,6 +10,7 @@ Vue.use(Tag); ### 代码演示 #### 基础用法 + 通过 type 属性控制 Tag 颜色,默认为灰色 ```html @@ -20,6 +21,7 @@ Vue.use(Tag); ``` #### 空心样式 + 设置`plain`属性设置为空心样式 ```html @@ -30,6 +32,7 @@ Vue.use(Tag); ``` #### 圆角样式 + 通过`round`设置为圆角样式 ```html @@ -40,6 +43,7 @@ Vue.use(Tag); ``` #### 标记样式 + 通过`mark`设置为标记样式(半圆角) ```html @@ -56,6 +60,7 @@ Vue.use(Tag); 标签 标签 标签 +标签 ``` #### 标签大小 @@ -72,10 +77,11 @@ Vue.use(Tag); |------|------|------|------|------| | type | 类型,可选值为`primary` `success` `danger` | `String` | - | - | | size | 大小, 可选值为`large` `medium` | `String` | - | 1.3.8 | -| color | 自定义标签颜色 | `String` | - | 1.3.8 | +| color | 标签颜色 | `String` | - | 1.3.8 | | plain | 是否为空心样式 | `Boolean` | `false` | - | | round | 是否为圆角样式 | `Boolean` | `false` | 1.3.8 | | mark | 是否为标记样式 | `Boolean` | `false` | - | +| text-color | 文本颜色,优先级高于`color`属性 | `String` | `white` | 1.4.10 | ### Slot