diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml index f85b1119..be5d1d13 100644 --- a/example/pages/tag/index.wxml +++ b/example/pages/tag/index.wxml @@ -30,7 +30,8 @@ 标签 标签 标签 - 标签 + 标签 + 标签 diff --git a/packages/tag/README.md b/packages/tag/README.md index b7f65dcf..03d263af 100644 --- a/packages/tag/README.md +++ b/packages/tag/README.md @@ -12,6 +12,7 @@ ### 代码演示 #### 基础用法 + 通过 type 属性控制 Tag 颜色,默认为灰色 ```html @@ -22,6 +23,7 @@ ``` #### 空心样式 + 设置`plain`属性设置为空心样式 ```html @@ -32,6 +34,7 @@ ``` #### 圆角样式 + 通过`round`设置为圆角样式 ```html @@ -42,6 +45,7 @@ ``` #### 标记样式 + 通过`mark`设置为标记样式(半圆角) ```html @@ -58,6 +62,7 @@ 标签 标签 标签 +标签 ``` #### 标签大小 @@ -74,10 +79,11 @@ |-----------|-----------|-----------|-------------| | type | 类型,可选值为`primary` `success` `danger` | `String` | - | | size | 大小, 可选值为`large` `medium` | `String` | - | -| color | 自定义标签颜色 | `String` | - | +| color | 标签颜色 | `String` | - | | plain | 是否为空心样式 | `Boolean` | `false` | | round | 是否为圆角样式 | `Boolean` | `false` | | mark | 是否为标记样式 | `Boolean` | `false` | +| text-color | 文本颜色,优先级高于`color`属性 | `String` | `white` | ### Slot diff --git a/packages/tag/index.ts b/packages/tag/index.ts index 9e5a0fe9..0622f4f1 100644 --- a/packages/tag/index.ts +++ b/packages/tag/index.ts @@ -8,6 +8,10 @@ const COLOR_MAP = { success: GREEN }; +type Style = { + [key: string]: string; +}; + VantComponent({ props: { size: String, @@ -15,14 +19,21 @@ VantComponent({ mark: Boolean, color: String, plain: Boolean, - round: Boolean + round: Boolean, + textColor: String }, computed: { style() { const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR; const key = this.data.plain ? 'color' : 'background-color'; - return `${key}: ${color}`; + const style = { [key]: color } as Style; + + if (this.data.textColor) { + style.color = this.data.textColor; + } + + return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';'); } } });