实现内容区域可输出文本，也能够通过点击按钮增加内容，输出得文本单个删除，增加得内容为一个整体，整体删除，不可反复增加。
难点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) },