feat(tag): add color attribute to t-tag in order to customize tag color

feat Tencent#3004

src/tag/_example/custom-color.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p class="color-picker">
+      <t-space align="center">
+        <label>调整颜色查看效果</label>
+        <t-color-picker v-model="color"></t-color-picker>
+      </t-space>
+    </p>
+    <t-space direction="horizontal">
+      <t-space>
+        <t-tag theme="primary" :color="color">默认</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="light">浅色</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="outline">outline</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="light-outline">light-outline</t-tag>
+      </t-space>
+    </t-space>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'rgb(0, 82, 217)',
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.color-picker {
+  margin-bottom: 20px;
+}
+</style>

src/tag/_usage/props.json

@@ -5,6 +5,11 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "color",
+    "type": "string",
+    "defaultValue": ""
+  },
   {
     "name": "disabled",
     "type": "Boolean",

src/tag/props.ts

@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 标签是否可关闭 */
   closable: Boolean,
+  /** 自定义标签颜色 */
+  color: String,
   /** 组件子元素 */
   content: {
     type: [String, Function] as PropType<TdTagProps['content']>,

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

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<Vue, TagConfig>('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<Vue, TagConfig>('tag'), getGlobalI
     // 图标
     const icon = renderTNodeJSX(this, 'icon');
     return (
-      <div class={this.tagClass} onClick={this.handleClick}>
+      <div class={this.tagClass} onClick={this.handleClick} style={this.tagStyle}>
         {icon}
         <span
           class={this.maxWidth ? `${this.componentName}--text` : undefined}