diff --git a/package.json b/package.json
index 20ba8d10..b5cefd87 100644
--- a/package.json
+++ b/package.json
@@ -40,13 +40,16 @@
     ]
   },
   "dependencies": {
+    "@types/lodash": "^4.14.195",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
     "axios": "^1.4.0",
+    "codemirror": "^5.65.13",
     "echarts": "^5.2.2",
     "element-plus": "^2.3.4",
+    "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
@@ -60,6 +63,7 @@
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@iconify-json/ep": "^1.1.10",
+    "@types/codemirror": "^5.60.7",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
@@ -98,4 +102,4 @@
   "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
   "author": "有来开源组织",
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/src/components/TagInput/index.vue b/src/components/TagInput/index.vue
new file mode 100644
index 00000000..0863728b
--- /dev/null
+++ b/src/components/TagInput/index.vue
@@ -0,0 +1,493 @@
+<template>
+  <div :class="['tagInputarea', className]">
+    <div
+      ref="cmEle"
+      :class="[
+        'tagInputareaIuput',
+        'ThemeBorderColor3',
+        !!readonly ? 'readonlyBg' : '',
+      ]"
+    ></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+import { getRePosFromStr, MODE } from "./util";
+// import { isFunction } from "lodash-es";
+
+const props = defineProps({
+  mode: {
+    type: Number,
+    default: MODE.TEXT,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  defaultValue: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  renderTag: {
+    type: Function,
+    required: true,
+  },
+  minHeight: {
+    type: Number,
+    default: 20,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  noCursor: {
+    type: Boolean,
+    default: false,
+  },
+  operatorsSetMargin: {
+    type: Boolean,
+    default: false,
+  },
+  autoComma: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用复制
+  disabledCopy: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+const emit = defineEmits(["onChange", "onBlur", "onFocus"]);
+//编辑器挂载dom节点
+const cmEle = ref();
+
+//编辑器实例
+let cmInstance: any = null;
+
+onMounted(() => {
+  if (cmEle.value) {
+    //编辑器初始化
+    cmInstance = CodeMirror(cmEle.value, {
+      value: props.defaultValue,
+      mode: "",
+      lineWrapping: true,
+      cursorHeight: props.noCursor || props.readonly ? 0 : 1,
+    });
+    //最小高度初始化
+    if (props.minHeight) {
+      let height =
+        typeof props.minHeight === "number"
+          ? `${props.minHeight}px`
+          : props.minHeight;
+      //编辑器高度
+      cmInstance.setSize("100%", height);
+      //编辑内容高度
+      let codeEle = cmEle.value.getElementsByClassName("CodeMirror-code")[0];
+      codeEle && codeEle.setAttribute("style", `min-height:${height}`);
+    }
+    //默认值初始化
+    if (props.defaultValue) {
+      updateTextareaView();
+      cmInstance.execCommand("goDocEnd");
+    }
+    //监听 value change
+    cmInstance.on("change", cmChange);
+    //监听 value beforeChange
+    cmInstance.on("beforeChange", cmBeforeChange);
+    //监听表单聚焦
+    cmInstance.on("focus", () => {
+      cmEle.value.classList.add("active");
+      cmFocus();
+    });
+
+    //监听表单失焦
+    cmInstance.on("blur", () => {
+      if (cmEle.value) {
+        cmEle.value.classList.remove("active");
+      }
+      cmBlur();
+    });
+    if (props.disabledCopy) {
+      // 禁止复制，防止tag复制的是id
+      cmInstance.on("copy", (cm: any, e: Event) => {
+        e.preventDefault();
+      });
+    }
+  }
+});
+
+//编辑器change
+const cmChange = (cm: any, obj: any): void => {
+  let value = cm.getValue();
+  if (obj.origin !== "setValue") {
+    emit("onChange", null, value, obj);
+  }
+
+  updateTextareaView();
+};
+
+//编辑器beforeChange
+const cmBeforeChange = (cm: any, obj: any): any => {
+  let { text } = obj;
+  // 如果是自定义公式，只能允许数字+、-、*、/、( \ ) , .,大写字符
+  if (
+    props.mode === MODE.FORMULA &&
+    (obj.origin === "paste" ||
+      obj.origin === "+input" ||
+      obj.origin === "*compose")
+  ) {
+    text = text.map((t: string) =>
+      t.replace(/[^+\-*\/0-9/a-z/A-Z\(\)\,\.]/gm, "").toUpperCase()
+    );
+    // 最大输入10000字符
+    if (text.map((t: string) => t).join("").length > 10000) {
+      text = text
+        .map((t: string) => t)
+        .join("")
+        .slice(0, 10000)
+        .split(",");
+      obj.update(obj.from, obj.to, text);
+      obj.cancel();
+    }
+  }
+
+  if (obj.origin === "undo" || obj.origin === "redo") {
+    return;
+  }
+  // 事件内，mode只能从每次props取，不然取不到最新
+  if (
+    props.readonly ||
+    (props.mode === MODE.ONLYTAG &&
+      obj.origin !== "+delete" &&
+      obj.origin !== "inserttag" &&
+      obj.origin !== "setValue")
+  ) {
+    obj.cancel();
+  }
+
+  // 事件内，mode只能从每次props取，不然取不到最新
+  if (
+    props.mode === MODE.FORMULA &&
+    obj.origin !== "+delete" &&
+    obj.origin !== "inserttag" &&
+    obj.origin !== "setValue"
+  ) {
+    text = text.map((t: any) =>
+      t
+        .toUpperCase()
+        .split("")
+        .filter((t: any) =>
+          (obj.origin === "paste"
+            ? /[0-9A-Z\+\-\*\/\(\)\,\.\$]/
+            : /[0-9A-Z\+\-\*\/\(\)\,\.]/
+          ).test(t)
+        )
+        .join("")
+    );
+  }
+  if (
+    props.mode === MODE.DATE &&
+    obj.origin !== "+delete" &&
+    obj.origin !== "inserttag" &&
+    obj.origin !== "setValue"
+  ) {
+    text = text.map((t: any) =>
+      t
+        .split("")
+        .filter((t: any) =>
+          (obj.origin === "paste" ? /[0-9YMdhm\+\-\$]/ : /[0-9YMdhm\+\-]/).test(
+            t
+          )
+        )
+        .join("")
+    );
+  }
+  obj.update(obj.from, obj.to, text);
+};
+
+//编辑器 foucus
+const cmFocus = (): void => {
+  emit("onFocus");
+};
+
+//编辑器 blur
+const cmBlur = (): void => {
+  emit("onBlur");
+};
+
+//设置 value
+const setValue = (value: string): void => {
+  // const position = cmInstance.getCursor()
+  cmInstance.setValue(value || "");
+  // const newPosition = {
+  //     line: position.line,
+  //     ch: position.ch + value.length - 2,
+  // }
+
+  // cmInstance.focus()
+  // cmInstance.setCursor(newPosition)
+  // cmInstance.execCommand('goDocEnd')
+};
+const getValue = () => {
+  return cmInstance.getValue();
+};
+//回显，更新渲染
+let markers: any = null;
+const updateTextareaView = () => {
+  const { mode, operatorsSetMargin } = props;
+  const value = cmInstance.getValue();
+  if (markers) {
+    markers.forEach((marker: any) => marker.clear());
+  }
+  markers = [];
+  markColumns(markers, value);
+  if (mode === MODE.FORMULA || operatorsSetMargin) {
+    markOperators(markers, value);
+  }
+};
+
+//光标行
+const markColumns = (markers: any, value: any) => {
+  const poss = getRePosFromStr(value);
+  poss.forEach((pos: any, i: number) => {
+    renderColumnTag(pos.tag, { isLast: i === poss.length - 1 }, (node: any) => {
+      markers.push(
+        cmInstance.markText(
+          { line: pos.line, ch: pos.start },
+          { line: pos.line, ch: pos.stop },
+          { replacedWith: node, handleMouseEvents: true }
+        )
+      );
+    });
+  });
+};
+
+//光标操作
+const markOperators = (markers: any, value: any) => {
+  const poss = getRePosFromStr(value, /\+|\-|\*|\/|\(|\)|,/g);
+  poss.forEach((pos: any, i: number) => {
+    const operatorEle = document.createElement("span");
+    operatorEle.classList.add("operator");
+    operatorEle.innerHTML = pos.tag;
+    markers.push(
+      cmInstance.markText(
+        { line: pos.line, ch: pos.start },
+        { line: pos.line, ch: pos.stop },
+        { replacedWith: operatorEle, handleMouseEvents: true }
+      )
+    );
+  });
+};
+
+//渲染 tag
+const renderColumnTag = (id: any, options: any, cb: any) => {
+  const node = document.createElement("div");
+  node.classList.add("columnTagCon");
+  //自定义渲染tag
+  // if (props.renderTag && isFunction(props.renderTag)) {
+  //   const tag = props.renderTag(id, options);
+  //   if (tag instanceof HTMLElement) {
+  //     node.appendChild(tag);
+  //     cb(node);
+  //     return;
+  //   }
+  // }
+  node.append(id);
+  cb(node);
+  return;
+};
+
+//插入 tag
+const insertColumnTag = (id: string) => {
+  const { mode, autoComma } = props;
+  const position = cmInstance.getCursor();
+  const editorValue = cmInstance.getValue();
+
+  cmInstance.replaceRange(
+    `${
+      mode === MODE.FORMULA && autoComma && editorValue[position.ch - 1] === "$"
+        ? ","
+        : ""
+    }$${id}$`,
+    position,
+    undefined,
+    "inserttag"
+  );
+  cmInstance.focus();
+  cmInstance.execCommand("goDocEnd");
+  if (cmEle.value) {
+    cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
+  }
+};
+// 获取光标位置
+const getCursor = () => {
+  return cmInstance.getCursor();
+};
+// 设置光标位置
+const setCustomCursor = (position: { line: number; ch: number }) => {
+  cmInstance.setCursor(position);
+};
+// 插入公式
+const insertFormula = (value: string) => {
+  const { mode, autoComma } = props;
+  const position = cmInstance.getCursor();
+
+  cmInstance.replaceRange(value, position, undefined, "insertFormula");
+  setTimeout(() => {
+    const newPosition = {
+      line: position.line,
+      ch: position.ch + value.length - 2,
+    };
+
+    cmInstance.focus();
+    cmInstance.setCursor(newPosition);
+    // cmInstance.execCommand('goDocEnd')
+  }, 0);
+  if (cmEle.value) {
+    cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
+  }
+};
+defineExpose({
+  insertColumnTag,
+});
+</script>
+
+<style lang="scss" scoped>
+.tagInputarea {
+  min-width: 0;
+  :deep {
+    .tagInputareaIuput {
+      border-radius: 3px;
+      border: 1px solid #409eff;
+      overflow: auto;
+
+      &:not(.active) {
+        border-color: #ccc !important;
+      }
+      // &.hasRightIcon {
+      //   border-radius: 3px 0 0 3px;
+      // }
+      &.readonlyBg {
+        .CodeMirror {
+          background-color: #eee !important;
+        }
+      }
+    }
+    // .rightIcon {
+    //   background-color: #f5f5f5;
+    //   font-size: 20px;
+    //   color: #757575;
+    //   height: 34px;
+    //   line-height: 33px;
+    //   padding: 0 7px;
+    //   border: 1px solid #ccc;
+    //   border-left: none;
+    //   border-radius: 0 3px 3px 0;
+    // }
+    .CodeMirror {
+      font-family: inherit !important;
+      box-sizing: border-box;
+      height: auto !important;
+
+      .CodeMirror-vscrollbar {
+        display: none !important;
+      }
+
+      // .CodeMirror-scroll {
+      //     height: auto;
+      //     overflow-y: hidden;
+      //     overflow-x: auto;
+      // }
+
+      .CodeMirror-lines {
+        padding: 6px 0;
+        min-height: 35px;
+      }
+      .CodeMirror-line {
+        padding: 0 10px;
+      }
+      .columnTagCon {
+        position: relative;
+        display: inline-flex;
+        box-sizing: border-box;
+        padding: 2px 4px;
+        max-width: 100%;
+        background: #d8eeff;
+        color: #174c76;
+        border: 1px solid #bbd6ea;
+        border-radius: 5px;
+      }
+      .columnTag {
+        position: relative;
+        display: inline-flex;
+        box-sizing: border-box;
+        cursor: pointer;
+        height: 24px;
+        font-size: 12px;
+        border: 1px solid #90caf9;
+        border-radius: 24px;
+        .columnName,
+        .columnValue {
+          display: inline-block;
+          height: 22px;
+          line-height: 22px;
+          padding: 0 10px;
+          overflow: hidden;
+        }
+        .columnName {
+          color: #2196f3;
+          background-color: rgba(33, 150, 243, 0.06);
+        }
+        .columnValue {
+          color: #fff;
+          border-radius: 0 22px 22px 0;
+          background-color: #249eff;
+          .ellipsis {
+            max-width: 9em;
+          }
+        }
+        &.onlytag {
+          margin-right: 6px;
+          &:after {
+            content: ",";
+            position: absolute;
+            right: -6px;
+            top: 6px;
+          }
+        }
+        &.deleted {
+          border-color: #f44336;
+          .columnName {
+            color: #f44336;
+            background-color: rgba(244, 67, 54, 0.06);
+          }
+          &:hover {
+            border-color: #f44336;
+            .columnName {
+              color: #f44336;
+              background-color: rgba(244, 67, 54, 0.12);
+            }
+          }
+        }
+        &:hover {
+          border-color: #ddd;
+          .columnName {
+            color: #9e9e9e;
+            background-color: rgba(158, 158, 158, 0.06);
+          }
+          .columnValue {
+            background-color: #bdbdbd;
+          }
+        }
+      }
+      .operator {
+        margin: 0 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/TagInput/util.ts b/src/components/TagInput/util.ts
new file mode 100644
index 00000000..3328db75
--- /dev/null
+++ b/src/components/TagInput/util.ts
@@ -0,0 +1,34 @@
+/**
+ * getRePosFromStr 正则匹配字段返回位置信息
+ * */
+export function getRePosFromStr(text: any = '', re: any = /\$.+?\$/g) {
+    const lines = text.split('\n')
+    const positions: any = []
+    let m
+    for (let i = 0; i < lines.length; i++) {
+        const l = lines[i]
+        while ((m = re.exec(l)) !== null) {
+            var tag = m[0].substring(1, m[0].length - 1)
+            positions.push({
+                line: i,
+                start: m.index,
+                stop: m.index + m[0].length,
+                tag,
+            })
+        }
+    }
+    return positions
+}
+/**
+ * 输入框模式
+ */
+export enum MODE {
+    // 文本
+    TEXT = 1,
+    // 公式
+    FORMULA,
+    // 只允许选择tag
+    ONLYTAG,
+    // 日期
+    DATE
+}
\ No newline at end of file
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index eb6c8426..32fa93bb 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -1,11 +1,12 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const ElTree: typeof import('element-plus/es')['ElTree']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -76,7 +77,6 @@ declare global {
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const shallowReactive: typeof import('vue')['shallowReactive']
@@ -91,6 +91,7 @@ declare global {
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -267,15 +268,18 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
-    readonly ElTree: UnwrapRef<typeof import('element-plus/es')['ElTree']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -346,7 +350,6 @@ declare module 'vue' {
     readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
     readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly resolveDirective: UnwrapRef<typeof import('vue')['resolveDirective']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
@@ -361,6 +364,274 @@ declare module 'vue' {
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
+    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 4e4c1673..d0f5a3ee 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -1,5 +1,7 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
@@ -72,6 +74,7 @@ declare module '@vue/runtime-core' {
     SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
     SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
+    TagInput: typeof import('./../components/TagInput/index.vue')['default']
     WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
   }
   export interface ComponentCustomProperties {
diff --git a/src/views/demo/taginput.vue b/src/views/demo/taginput.vue
new file mode 100644
index 00000000..e4d345b0
--- /dev/null
+++ b/src/views/demo/taginput.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import TagTextInput from "@/components/TagInput/index.vue";
+
+//假数据
+let arrName = new Array(20).fill("tag");
+
+/**
+ * renderTag 渲染 tag
+ * @param {any} id $$匹配到的之间的值
+ * @param {object} options 一些参数
+ * @return {element} 返回一个dom节点
+ * */
+const renderTag = (id: any, options: any) => {
+  //拼接tag名称
+  let tagName = `${arrName[Number(id)]}-${id}`;
+  //创建tag元素
+  const ele = document.createElement("div");
+  ele.classList.add("tag-demo-con");
+  ele.innerHTML = `<div class="tag-demo">${tagName}</div>`;
+  return ele;
+};
+
+// 触发增加 tag
+const refTagTextarea = ref();
+const addTag = (id: any) => {
+  refTagTextarea.value.insertColumnTag(id);
+};
+
+/**
+ * 编辑器 change 监听
+ * @param {any} error 默认为 null
+ * @param {string} value 返回编辑器内容
+ * @param {object} obj 返回一个编辑事件描述对象
+ * */
+const onChange = (error: any, value: string, obj: any): void => {
+  console.log("onChange", error, value, obj);
+};
+
+const onFocus = (): void => {
+  console.log("onFocus");
+};
+
+const onBlur = (): void => {
+  console.log("onBlur");
+};
+</script>
+<template>
+  <div class="demo-tagInput">
+    <TagTextInput
+      ref="refTagTextarea"
+      class-name="demo"
+      :default-value="`April$18$`"
+      :readonly="false"
+      :no-cursor="false"
+      :min-height="200"
+      :render-tag="renderTag"
+      @on-change="onChange"
+      @on-focus="onFocus"
+      @on-blur="onBlur"
+    />
+
+    <div class="tag-wrap">
+      <el-button v-for="item in 5" :key="item" @click="addTag(item)">
+        {{ item }}</el-button
+      >
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.demo-tagInput {
+  width: 500px;
+  height: auto;
+  margin: 10px;
+  :deep {
+    .tag-demo-con {
+      .tag-demo {
+        padding: 4px;
+        margin: 4px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        line-height: 1em;
+        min-width: 25px;
+      }
+    }
+  }
+  .tag-wrap {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 7c10550c..61f3928e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -149,6 +149,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         "@wangeditor/editor",
         "@wangeditor/editor-for-vue",
         "vue-i18n",
+        'codemirror'
       ],
     },
   };