Vue Div 实现可输入文本，功能类似聊天，可输入文本，可添加整体文本，整体文本删除

实现内容区域可输入文本，也可以通过点击按钮添加内容，输入得文本单个删除，添加得内容为一个整体，整体删除，不可重复添加。

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

 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 = `@${i.obj_name}`;
          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)
    },