diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
index 8c4ff034af70e4eae0b492f26eaac911799f23e3..4b68406c5fe300b883ae53e97d4aa1c57958d66c 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -16,11 +16,11 @@ export default (props: PropsType) => {
     multipleDeleteTag(tagList, tag)
   }
   return (
-    <div class="devui-tag">
-      <span>{ tag?.label }</span>
-      <div class="devui-tag__close" onClick={deleteCurrentTag}>
-        <d-icon name="close"></d-icon>
+    <div class='devui-tag'>
+      <span>{tag?.label}</span>
+      <div class='devui-tag__close' onClick={deleteCurrentTag}>
+        <d-icon name='close'></d-icon>
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/devui-vue/devui/tag/index.ts b/packages/devui-vue/devui/tag/index.ts
index 43310285f5c37a45fdbee30011f4ca0b4bb64b92..d3b5f9167e0ce43c41936c8e1b44ab788ae50af9 100644
--- a/packages/devui-vue/devui/tag/index.ts
+++ b/packages/devui-vue/devui/tag/index.ts
@@ -10,7 +10,7 @@ export { Tag }
 export default {
   title: 'Tag 标签',
   category: '数据展示',
-  status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '70%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
     app.use(Tag as any)
   }
diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss
index b6b73434648457cfb7cb9e2baa2849b6aa692b4a..0ef0d58515fdb73d651df94f080a92170f70c73e 100644
--- a/packages/devui-vue/devui/tag/src/tag.scss
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -56,4 +56,18 @@ $devui-tag-normal-config: (
       }
     }
   }
+  .remove-button {
+    display: inline-block;
+    margin-left: 12px;
+    font-size: $devui-font-size-icon;
+    cursor: pointer;
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
+    border-radius: 50%;
+    text-align: center;
+    position: relative;
+    top: -0.22em;
+    vertical-align: middle;
+  }
 }
diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx
index 146046f2c0f21c7feccab9a956f51bc42639ea05..7d86daa1677c4e9cd47514ae1c462f15a038a69b 100644
--- a/packages/devui-vue/devui/tag/src/tag.tsx
+++ b/packages/devui-vue/devui/tag/src/tag.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, toRefs } from 'vue'
+import { defineComponent, toRefs, ref, watch, onUnmounted } from 'vue'
 import { tagProps, TagProps } from './tag-types'
 import { useClass, useColor } from './hooks'
 import './tag.scss'
@@ -7,36 +7,56 @@ import './tag.scss'
 export default defineComponent({
   name: 'DTag',
   props: tagProps,
-  emits: ['click'],
+  emits: ['click', 'tagDelete', 'checkedChange'],
   setup(props: TagProps, { slots, emit }) {
-    const { type, color, checked, titleContent } = toRefs(props)
+    const { type, color, checked, titleContent, deletable } = toRefs(props)
     const tagClass = useClass(props)
     const themeColor = useColor(props)
     const tagTitle = titleContent.value || ''
+    const isDefaultTag = () => !type.value && !color.value
+    const isShow = ref(true)
     // 子组件的点击事件
-    const Click = () => {
+    const handleClick = () => {
       emit('click')
     }
-    return () => (
-      <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>
-    )
+    const handleDelete = () => {
+      isShow.value = false
+      emit('tagDelete')
+    }
+    const closeIconEl = () => {
+      return deletable.value ? (
+        <a class='remove-button' onClick={handleDelete}>
+          {isDefaultTag() ? (
+            <d-icon size='12px' name='error-o' color='#adb0b8' />
+          ) : (
+            <d-icon size='12px' name='close' color={themeColor.value} />
+          )}
+        </a>
+      ) : null
+    }
+    //tag 的 check 状态改变时触发的事件checkedChange
+    const unWatch = watch(checked, (newVal) => {
+      console.log('checkedChange')
+
+      emit('checkedChange', newVal)
+    })
+    onUnmounted(() => unWatch())
+    return () =>
+      isShow.value && (
+        <div class='devui-tag' onClick={handleClick} v-show={isShow.value}>
+          <span
+            class={tagClass.value}
+            style={{
+              display: 'block',
+              color: checked.value ? '#fff' : themeColor.value,
+              backgroundColor: checked.value ? themeColor.value : !color.value ? '' : '#fff'
+            }}
+            title={tagTitle}
+          >
+            {slots.default?.()}
+            {closeIconEl()}
+          </span>
+        </div>
+      )
   }
 })
diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md
index 5357412c3924c7ee2bd5a44f029a3c788a5d4537..dfb22a07c749ff1670a5b9406fff66383132941a 100644
--- a/packages/devui-vue/docs/components/tag/index.md
+++ b/packages/devui-vue/docs/components/tag/index.md
@@ -58,7 +58,8 @@ export default defineComponent({
 ```vue
 <template>
   <div>
-    <d-tag type="primary" :checked="isChecked" @click="tagClick">标签二</d-tag>
+    <d-tag type="primary" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
+    <d-tag color="#39afcc" :checked="isChecked" @click="tagClick">不要点我呀</d-tag>
   </div>
 </template>
 <script>
@@ -80,20 +81,52 @@ export default defineComponent({
 
 :::
 
+### 可关闭的
+
+:::demo 由`deletable`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
+
+```vue
+<template>
+  <div>
+    <d-tag deletable @click="handleClose">tag2</d-tag>
+    <d-tag type="primary" deletable @click="handleClose">tag2</d-tag>
+    <d-tag color="#39afcc" deletable @click="handleClose">tag2</d-tag>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const handleClose = () => {
+      console.log('handleClose')
+    }
+    return { handleClose }
+  }
+})
+</script>
+
+<style></style>
+```
+
+:::
+
 ### API
 
 #### Props
 
-|  参数   |   类型    |  默认值   |                    说明                     |              可选值              |    跳转至 Demo    |
-| :-----: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: |
-|  type   | `string`  | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) |
-|  color  | `string`  |    ''     |             可选，标签的主题色              |                                  |                   |
-| checked | `boolean` |   false   |       可选，可选，标签选中的初始状态        |          `true\|false`           | [示例](#基本用法) |
+|     参数     |   类型    |  默认值   |                    说明                     |              可选值              |    跳转至 Demo    |
+| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: |
+|     type     | `string`  | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) |
+|    color     | `string`  |    ''     |             可选，标签的主题色              |                -                 | [示例](#基本用法) |
+| titleContent | `string`  |    ''     |    可选，设置鼠标悬浮时 title 的显示内容    |                -                 | [示例](#基本用法) |
+|   checked    | `boolean` |   false   |          可选，标签选中的初始状态           |          `true\|false`           | [示例](#可被选中) |
+|  deletable   | `boolean` |   false   |          可选，设置标签是否可删除           |          `true\|false`           | [示例](#可关闭的) |
 
 #### Event
 
-| 名称          | 说明                              |
-| :------------ | --------------------------------- |
-| click         | 点击tag 的时候触发的事件          |
-| tagDelete     | 删除 tag 的时候触发的事件         |
-| checkedChange | tag 的 check 状态改变时触发的事件 |
+| 名称          | 说明                                                        |
+| :------------ | ----------------------------------------------------------- |
+| click         | 点击 tag 的时候触发的事件                                   |
+| tagDelete     | 删除 tag 的时候触发的事件                                   |
+| checkedChange | tag 的 check 状态改变时触发的事件，通过参数接收标签最新状态 |