关于vue.js:Vue-Div-实现可输入文本功能类似聊天可输入文本可添加整体文本整体文本删除

实现内容区域可输出文本，也能够通过点击按钮增加内容，输出得文本单个删除，增加得内容为一个整体，整体删除，不可反复增加。

难点 1：增加得内容整体删除，这时候就得是一个整体，只能增加整个标签，删除得时候能力整体删除。

<div
        :style="{borderColor:isLargeNum?'#f54e45':'#c3c7cb'}"
        id="container"
        v-html="temps"
        @input="deleteEvent"
        contenteditable="true"   // 此属性可使 div 可输出
        ref="custom-text"
        class="custom-text"
        @paste.prevent="() => {return false}" // 禁止输出空格
      ></div>

 deleteEvent() {
      const that = this;
      this.$nextTick(() => {
        // 先获取以后 dom 外面所有内容，通过 id 惟一来匹配是否剔除已选数据
        let tes = this.$refs["custom-text"].innerHTML;
        this.objectList = JSON.parse(
          JSON.stringify(
            this.objectList.filter(i => {return tes.includes(i.obj_id+'-'+i.obj_name);
            })
          )
        );
        setTimeout(() => {that.matter.desc_forepart = that.$refs["custom-text"].innerText;
          that.matter.desc_objs = that.objectList;
          that.matter.description = that.$refs["custom-text"].innerText;
          if (that.matter.desc_forepart.trim().length > 1000) {this.isLargeNum = true;} else {this.isLargeNum = false;}
        });
      });
    },

 // 选择对象后的进行对应数据的保留
    handleChangeObj(data) {
      const that = this;
      let tes = this.$refs["custom-text"].innerHTML;
      data.forEach(i => {if (!this.$refs["custom-text"].innerHTML.includes(i.obj_id+'-'+i.obj_name)) {const templates = `<span id=${i.obj_id}-${i.obj_name} style='color: rgb(0, 145, 255); font-size: 14px; -webkit-user-modify: read-only;'>@${i.obj_name}</span><i></i>`;
          tes += templates;
        }
      }); // 通过增加 span 属性得 id+name 来标识唯一性，利于反复增加和删除，this.temps = tes;
      this.isSHowaddObject = false;
      this.objectList = data;
      setTimeout(() => {this.matter.desc_forepart = this.$refs["custom-text"].innerText;
        this.matter.desc_objs = this.objectList;
        this.matter.description = this.$refs["custom-text"].innerText;
        if (that.matter.desc_forepart.trim().length > 1000) {this.isLargeNum = true;} else {this.isLargeNum = false;}
      });
      // this.$set(this.workOrderQuery[this.findVluaindex], 'value', data)
    },