diff --git a/src/tag/_example/custom-color.vue b/src/tag/_example/custom-color.vue
new file mode 100644
index 000000000..900b7e1d1
--- /dev/null
+++ b/src/tag/_example/custom-color.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+ 默认
+
+
+ 浅色
+
+
+ outline
+
+
+ light-outline
+
+
+
+
+
+
+
diff --git a/src/tag/_usage/props.json b/src/tag/_usage/props.json
index 628574364..ca5c153a2 100644
--- a/src/tag/_usage/props.json
+++ b/src/tag/_usage/props.json
@@ -5,6 +5,11 @@
"defaultValue": false,
"options": []
},
+ {
+ "name": "color",
+ "type": "string",
+ "defaultValue": ""
+ },
{
"name": "disabled",
"type": "Boolean",
diff --git a/src/tag/props.ts b/src/tag/props.ts
index 501789dcb..68922af95 100644
--- a/src/tag/props.ts
+++ b/src/tag/props.ts
@@ -10,6 +10,8 @@ import { PropType } from 'vue';
export default {
/** 标签是否可关闭 */
closable: Boolean,
+ /** 自定义标签颜色 */
+ color: String,
/** 组件子元素 */
content: {
type: [String, Function] as PropType,
diff --git a/src/tag/tag.md b/src/tag/tag.md
index 39e193ccd..e67120941 100644
--- a/src/tag/tag.md
+++ b/src/tag/tag.md
@@ -6,6 +6,7 @@
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
closable | Boolean | false | 标签是否可关闭 | N
+color | String | '' | 颜色 | N
content | String / Slot / Function | - | 组件子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 组件子元素,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。默认风格(theme=default)才有禁用态 | N
diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx
index 70b92b88b..ec9e0d5fa 100644
--- a/src/tag/tag.tsx
+++ b/src/tag/tag.tsx
@@ -1,6 +1,7 @@
import Vue from 'vue';
import { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue';
import { ScopedSlotReturnValue } from 'vue/types/vnode';
+import tinycolor from 'tinycolor2';
import props from './props';
import mixins from '../utils/mixins';
import getConfigReceiverMixins, { TagConfig, getGlobalIconMixins } from '../config-provider/config-receiver';
@@ -38,6 +39,27 @@ export default mixins(getConfigReceiverMixins('tag'), getGlobalI
}
return {};
},
+ tagStyle(): Styles {
+ if (this.color) {
+ const luminance = tinycolor(this.color).getLuminance();
+
+ const style: Styles = {
+ color: luminance > 0.5 ? 'black' : 'white',
+ };
+
+ if (this.variant === 'outline' || this.variant === 'light-outline') {
+ style.borderColor = this.color;
+ }
+ if (this.variant !== 'outline') {
+ style.backgroundColor = this.variant === 'dark' ? this.color : this.color;
+ }
+ if (this.variant !== 'dark') {
+ style.color = this.color;
+ }
+ return style;
+ }
+ return {};
+ },
},
methods: {
@@ -81,7 +103,7 @@ export default mixins(getConfigReceiverMixins('tag'), getGlobalI
// 图标
const icon = renderTNodeJSX(this, 'icon');
return (
-