diff --git a/packages/devui-vue/devui/tag/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts
index 4f2a81330a29bc727b263472411883487b12f5f4..ff702f1951e71c1a6cadfd5319b47675852dd153 100644
--- a/packages/devui-vue/devui/tag/src/hooks/index.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/index.ts
@@ -1,3 +1,4 @@
-import useStyle from './use-style'
+import useClass from './use-class'
+import useColor from './use-color'
 
-export { useStyle }
+export { useClass, useColor }
diff --git a/packages/devui-vue/devui/tag/src/hooks/use-style.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
similarity index 57%
rename from packages/devui-vue/devui/tag/src/hooks/use-style.ts
rename to packages/devui-vue/devui/tag/src/hooks/use-class.ts
index 2dbb29d72cc7711ee2481484387b90a5ae9d0a01..0a5015a92a57d19230f90160dfe186f33792c18d 100644
--- a/packages/devui-vue/devui/tag/src/hooks/use-style.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
@@ -3,8 +3,7 @@ import { tagProps, TagProps } from '../tag-types'
 
 export default function (props: TagProps) {
   return computed(() => {
-    const { type } = props
-
-    return `devui-tag devui-tag-${type || 'default'}`
+    const { type, color } = props
+    return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'}`
   })
 }
diff --git a/packages/devui-vue/devui/tag/src/hooks/use-color.ts b/packages/devui-vue/devui/tag/src/hooks/use-color.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82adf0c41388f977bafe237ec0e5f51681060ceb
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/hooks/use-color.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { TagProps } from '../tag-types'
+
+export default function (props: TagProps) {
+  return computed(() => {
+    const { color, type } = props
+    const typeMap = {
+      primary: '#5e7ce0',
+      success: '#50d4ab',
+      warning: '#fac20a',
+      danger: '#f66f6a'
+    }
+    const colorMap = {
+      'blue-w98': '#3383ff',
+      'aqua-w98': '#39afcc',
+      'olivine-w98': '#2fa898',
+      'green-w98': '#4eb15e',
+      'yellow-w98': '#b08d1a',
+      'orange-w98': '#d47f35',
+      'red-w98': '#f66f6a',
+      'pink-w98': '#f3689a',
+      'purple-w98': '#a97af8'
+    }
+
+    if (!color && type) return typeMap[type]
+    // 判断传入的color是colorMap成员or颜色码
+    const themeColor = colorMap[color] || color
+    return themeColor
+  })
+}
diff --git a/packages/devui-vue/devui/tag/src/tag-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts
index f8fd95a57f4f119dcc6f936a55362e4121b9a462..cccdb2f1470d87d800dbf4ffd4b0e1a5382e1961 100644
--- a/packages/devui-vue/devui/tag/src/tag-types.ts
+++ b/packages/devui-vue/devui/tag/src/tag-types.ts
@@ -10,6 +10,18 @@ export const tagProps = {
   color: {
     type: String as PropType<string>,
     default: ''
+  },
+  titleContent: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  checked: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  deletable: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 } as const
 
diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss
index 8c4fab2446c573f8a75ca71c8f6f9721c5eef1fc..b6b73434648457cfb7cb9e2baa2849b6aa692b4a 100644
--- a/packages/devui-vue/devui/tag/src/tag.scss
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -25,6 +25,9 @@ $devui-tag-normal-config: (
     color: $devui-danger,
     background-color: $devui-danger-bg,
     border-color: $devui-danger-line
+  ),
+  colorful: (
+    background-color: #fff
   )
 );
 
@@ -45,7 +48,7 @@ $devui-tag-normal-config: (
     position: relative;
     cursor: default;
 
-    @each $type in default, primary, success, warning, danger {
+    @each $type in default, primary, success, warning, danger, colorful {
       &.devui-tag-#{$type} {
         @each $key, $value in map-get($devui-tag-normal-config, $type) {
           #{$key}: $value;
diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx
index 615641197e99bcea75035dbb35a61d70c551cfc3..146046f2c0f21c7feccab9a956f51bc42639ea05 100644
--- a/packages/devui-vue/devui/tag/src/tag.tsx
+++ b/packages/devui-vue/devui/tag/src/tag.tsx
@@ -1,20 +1,39 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, toRefs } from 'vue'
 import { tagProps, TagProps } from './tag-types'
-import { useStyle } from './hooks'
+import { useClass, useColor } from './hooks'
 import './tag.scss'
 // 类型声明
 
 export default defineComponent({
   name: 'DTag',
   props: tagProps,
-  emits: [],
-  setup(props: TagProps, { slots }) {
-    //获取type对应样式
-    const tagClass = useStyle(props)
-
+  emits: ['click'],
+  setup(props: TagProps, { slots, emit }) {
+    const { type, color, checked, titleContent } = toRefs(props)
+    const tagClass = useClass(props)
+    const themeColor = useColor(props)
+    const tagTitle = titleContent.value || ''
+    // 子组件的点击事件
+    const Click = () => {
+      emit('click')
+    }
     return () => (
-      <div class="devui-tag">
-        <span class={tagClass.value} style="display: block;">
+      <div class='devui-tag' onClick={Click}>
+        <span
+          class={tagClass.value}
+          style={{
+            display: 'block',
+            color: checked.value ? '#fff' : themeColor.value,
+            backgroundColor: checked.value
+              ? themeColor.value
+              : type.value
+              ? ''
+              : !color.value
+              ? ''
+              : '#fff'
+          }}
+          title={tagTitle}
+        >
           {slots.default?.()}
         </span>
       </div>
diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md
index c96b6238269cb9840a566900ab74031101aada47..5357412c3924c7ee2bd5a44f029a3c788a5d4537 100644
--- a/packages/devui-vue/docs/components/tag/index.md
+++ b/packages/devui-vue/docs/components/tag/index.md
@@ -2,23 +2,38 @@
 
 标签展示组件。
 
-## 何时使用
+### 何时使用
 
 用户需要展示多个标签时。
 
-## 基本用法
+### 基本用法
 
-:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色
+:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义主题色
 
 ```vue
 <template>
-  <d-tag>标签一</d-tag>
-  <d-tag type="primary">标签二</d-tag>
-  <d-tag type="success">标签三</d-tag>
-  <d-tag type="warning">标签四</d-tag>
-  <d-tag type="danger">标签五</d-tag>
+  <div>
+    <d-tag>标签一</d-tag>
+    <d-tag type="primary">标签二</d-tag>
+    <d-tag type="success">标签三</d-tag>
+    <d-tag type="warning">标签四</d-tag>
+    <d-tag type="danger">标签五</d-tag>
+  </div>
+  <div>
+    <d-tag color="blue-w98">blue-w98</d-tag>
+    <d-tag color="aqua-w98">aqua-w98</d-tag>
+    <d-tag color="aqua-w98">aqua-w98</d-tag>
+    <d-tag color="olivine-w98">olivine-w98</d-tag>
+    <d-tag color="green-w98">green-w98</d-tag>
+    <d-tag color="yellow-w98">yellow-w98</d-tag>
+    <d-tag color="orange-w98">orange-w98</d-tag>
+    <d-tag color="red-w98">red-w98</d-tag>
+    <d-tag color="pink-w98">pink-w98</d-tag>
+    <d-tag color="purple-w98">purple-w98</d-tag>
+    <d-tag color="#aa2116">#aa2116</d-tag>
+    <d-tag color="#007d65">#007d65</d-tag>
+  </div>
 </template>
-
 <script>
 import { defineComponent } from 'vue'
 
@@ -36,18 +51,49 @@ export default defineComponent({
 
 :::
 
-## API
+### 可被选中
+
+:::demo 由`checked`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
+
+```vue
+<template>
+  <div>
+    <d-tag type="primary" :checked="isChecked" @click="tagClick">标签二</d-tag>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const isChecked = ref(true)
+    const tagClick = () => {
+      isChecked.value = !isChecked.value
+    }
+    return { isChecked, tagClick }
+  }
+})
+</script>
+
+<style></style>
+```
+
+:::
+
+### API
 
-### Props
+#### Props
 
-| 参数  |   类型   | 默认值  |        说明        |              可选值              |    跳转至 Demo    |
-| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: |
-| type  | `string` | defalut |  可选，标签的类型  | `success\|info\|warning\|danger` | [示例](#基本用法) |
-| color | `string` |   ''    | 可选，标签的主题色 |                                  |                   |
+|  参数   |   类型    |  默认值   |                    说明                     |              可选值              |    跳转至 Demo    |
+| :-----: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: |
+|  type   | `string`  | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) |
+|  color  | `string`  |    ''     |             可选，标签的主题色              |                                  |                   |
+| checked | `boolean` |   false   |       可选，可选，标签选中的初始状态        |          `true\|false`           | [示例](#基本用法) |
 
-### Event
+#### Event
 
 | 名称          | 说明                              |
 | :------------ | --------------------------------- |
+| click         | 点击tag 的时候触发的事件          |
 | tagDelete     | 删除 tag 的时候触发的事件         |
 | checkedChange | tag 的 check 状态改变时触发的事件 |