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)
    },