vue3实现element可编辑的tag标签

在 Vue3 中，你可以利用 Element UI 的 `el-tag` 组件结合自定义指令（v-model）以及事件监听，来实现在 Element UI 的 Tag 标签上添加编辑功能。以下是简单的步骤：

1. 首先，引入必要的依赖并安装 Element UI：

npm install element-ui@latest

2. 在组件中导入需要的标签和指令：

import { ElTag } from 'element-plus';
import { defineComponent, ref } from 'vue';

3. 定义一个数组用于存储标签数据，并创建一个可编辑的引用：

export default defineComponent({
  components: {
    ElTag,
  },
  setup() {
    const tags = ref([]); // 存储所有标签
    const editableTag = ref({ text: '' }); // 当前正在编辑的标签文本

    // 自定义指令 v-editable，用于开启编辑模式
    const editable = (el) => {
      el.oninput = (e) => {
        editableTag.value.text = e.target.value;
      };
      el.onkeydown = (e) => {
        if (e.key === 'Enter') {
          handleSave();
          e.preventDefault(); // 阻止默认提交行为
        }
      };
      el.addEventListener('blur', handleBlur);
    };

    // 编辑标签处理函数
    const handleSave = () => {
      if (editableTag.value.text.trim()) {
        tags.value.push(editableTag.value);
        editableTag.value.text = ''; // 清空输入框
      }
    };

    // 当离开编辑状态时，保存更改
    const handleBlur = () => {
      if (!editableTag.value.text.trim()) {
        editableTag.value.text = '';
      }
    };

    return {
      tags,
      editable,
    };
  },
});

4. 在模板中使用 `ElTag` 并应用自定义指令：

<template>
  <div>
    <el-input v-model="editableTag.text" @keyup.enter.prevent />
    <el-tag
      v-for="(tag, index) in tags"
      :key="index"
      closable
      :editable="editable(tag.$el)"
      contenteditable
    >
      {{ tag.text }}
    </el-tag>
  </div>
</template>