diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md
index dfb22a07c7..0e09ca451d 100644
--- a/packages/devui-vue/docs/components/tag/index.md
+++ b/packages/devui-vue/docs/components/tag/index.md
@@ -35,15 +35,44 @@
   </div>
 </template>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-    return {
-      msg: 'Tag 标签 组件文档示例'
-    }
-  }
-})
+    return {};
+  },
+});
+</script>
+
+<style></style>
+```
+
+:::
+
+### 自定义
+
+:::demo 使用默认插槽可自由定制你的 tag
+
+```vue
+<template>
+  <div>
+    <d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
+    <d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
+    <d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </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>
@@ -53,7 +82,7 @@ export default defineComponent({
 
 ### 可被选中
 
-:::demo 由`checked`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
+:::demo 由`checked`属性来设置 tag 选中的状态，可通过点击来改变`checked`的值
 
 ```vue
 <template>
@@ -63,17 +92,17 @@ export default defineComponent({
   </div>
 </template>
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const isChecked = ref(true)
+    const isChecked = ref(true);
     const tagClick = () => {
-      isChecked.value = !isChecked.value
-    }
-    return { isChecked, tagClick }
-  }
-})
+      isChecked.value = !isChecked.value;
+    };
+    return { isChecked, tagClick };
+  },
+});
 </script>
 
 <style></style>
@@ -81,29 +110,31 @@ export default defineComponent({
 
 :::
 
-### 可关闭的
+### 可移除的
 
-:::demo 由`deletable`属性来设置 tag 选中的初始状态，可通过监听点击事件来改变`checked`的值
+:::demo 由`deletable`属性来设置标签是否可删除
 
 ```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>
+    <d-tag deletable @tag-delete="handleClose">tag1</d-tag>
+    <d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
+    <d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</d-tag>
   </div>
 </template>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
     const handleClose = () => {
-      console.log('handleClose')
-    }
-    return { handleClose }
-  }
-})
+      console.log('handleClose');
+    };
+    return {
+      handleClose,
+    };
+  },
+});
 </script>
 
 <style></style>
@@ -115,18 +146,18 @@ export default defineComponent({
 
 #### Props
 
-|     参数     |   类型    |  默认值   |                    说明                     |              可选值              |    跳转至 Demo    |
-| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :---------------: |
-|     type     | `string`  | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [示例](#基本用法) |
-|    color     | `string`  |    ''     |             可选，标签的主题色              |                -                 | [示例](#基本用法) |
-| titleContent | `string`  |    ''     |    可选，设置鼠标悬浮时 title 的显示内容    |                -                 | [示例](#基本用法) |
-|   checked    | `boolean` |   false   |          可选，标签选中的初始状态           |          `true\|false`           | [示例](#可被选中) |
-|  deletable   | `boolean` |   false   |          可选，设置标签是否可删除           |          `true\|false`           | [示例](#可关闭的) |
+|     参数     |   类型    |  默认值   |                    说明                     |              可选值              |      跳转至 Demo      |
+| :----------: | :-------: | :-------: | :-----------------------------------------: | :------------------------------: | :-------------------: |
+|     type     | `string`  | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | `success\|info\|warning\|danger` | [基本用法](#基本用法) |
+|    color     | `string`  |    ''     |             可选，标签的主题色              |                -                 | [基本用法](#基本用法) |
+| title-content | `string`  |    ''     |    可选，设置鼠标悬浮时 title 的显示内容    |                -                 | [基本用法](#基本用法) |
+|   checked    | `boolean` |   false   |          可选，标签选中的初始状态           |          `true\|false`           | [可被选中](#可被选中) |
+|  deletable   | `boolean` |   false   |          可选，设置标签是否可删除           |          `true\|false`           | [可移除的](#可移除的) |
 
 #### Event
 
-| 名称          | 说明                                                        |
-| :------------ | ----------------------------------------------------------- |
-| click         | 点击 tag 的时候触发的事件                                   |
-| tagDelete     | 删除 tag 的时候触发的事件                                   |
-| checkedChange | tag 的 check 状态改变时触发的事件，通过参数接收标签最新状态 |
+| 名称           | 说明                                                        |
+| :------------- | ----------------------------------------------------------- |
+| click          | 点击 tag 的时候触发的事件                                   |
+| tag-delete     | 删除 tag 的时候触发的事件                                   |
+| checked-change | tag 的 check 状态改变时触发的事件，通过参数获取标签最新状态 |
diff --git a/packages/devui-vue/docs/en-US/components/tag/index.md b/packages/devui-vue/docs/en-US/components/tag/index.md
new file mode 100644
index 0000000000..330c32aa49
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/tag/index.md
@@ -0,0 +1,163 @@
+# Tag 标签
+
+Tags.
+
+### When To Use
+
+When multiple tags need to be displayed
+
+### Basic
+
+:::demo Defines the label style by using the `type` attribute or `color` attribute.
+
+```vue
+<template>
+  <div>
+    <d-tag>tag1</d-tag>
+    <d-tag type="primary">tag2</d-tag>
+    <d-tag type="success">tag3</d-tag>
+    <d-tag type="warning">tag4</d-tag>
+    <d-tag type="danger">tag5</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';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style></style>
+```
+
+:::
+
+### Custom
+
+:::demo Use the default slot to customize your tag.
+
+```vue
+<template>
+  <div>
+    <d-tag><d-icon name="bug" size="12px" /> bug </d-tag>
+    <d-tag type="primary"><d-icon name="bug" size="12px" /> bug </d-tag>
+    <d-tag color="#b05bc1"><d-icon name="bug" size="12px" /> bug </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>
+```
+
+:::
+
+### Can be selected
+
+:::demo The `checked` attribute is used to set the checked status of the tag, and the `checked` value can be changed by clicking.
+
+```vue
+<template>
+  <div>
+    <d-tag type="primary" :checked="isChecked" @click="tagClick">don't click me</d-tag>
+    <d-tag color="#39afcc" :checked="isChecked" @click="tagClick">don't click me</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>
+```
+
+:::
+
+### Deletable
+
+:::demo The `deletable` attribute is used to set whether the tag can be deleted
+
+```vue
+<template>
+  <div>
+    <d-tag deletable @tag-delete="handleClose">tag1</d-tag>
+    <d-tag type="primary" deletable @tag-delete="handleClose">tag2</d-tag>
+    <d-tag color="#39afcc" deletable @tag-delete="handleClose">tag3</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' | Optional. Type of the a tag, color does not take effect after the type is specified. | `success\|info\|warning\|danger` |           [Basic](#basic)           |
+|    color     | `string`  |    ''     |                         Optional. Theme color of the a tag.                          |                -                 |           [Basic](#basic)           |
+| title-content | `string`  |    ''     |            Optional. Sets the title displayed when the cursor is hovered.            |                -                 |           [Basic](#basic)           |
+|   checked    | `boolean` |   false   |                     Optional. Initial status of a tag. selected.                     |          `true\|false`           | [Can be selected](#can-be-selected) |
+|  deletable   | `boolean` |   false   |                  Optional. Specifies whether a tag can be deleted.                   |          `true\|false`           |       [Deletable](#deletable)       |
+
+#### Event
+
+| 名称           | 说明                                                      |
+| :------------- | --------------------------------------------------------- |
+| click          | Event triggered when a tag is clicked.                    |
+| tag-delete     | Event triggered when a tag is deleted.                    |
+| checked-change | Event triggered when the check status of the tag changes. |