当前位置: 首页 > Web前端 > vue.js

vuediv可以输入文字,功能类似于聊天,可以输入文字,可以添加全文,删除全文

时间:2023-03-31 22:45:15 vue.js

,可以在内容区输入文字,也可以点击添加内容按钮,将输入的文字逐条删除,将内容整体添加,整体删除,不可重复添加。难点一:添加的内容被整体删除。这时候,一定是一个整体。只能添加整个标签,删除时只能删除整个标签。

deleteEvent(){constthat=这;this.$nextTick(()=>{//先获取当前dom中的所有内容,使用唯一id匹配是否排除选中的数据lettes=this.$refs["custom-text"].innerHTML;this.objectList=JSON.parse(JSON.stringify(this.objectList.filter(i=>{returntes.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;如果(that.matter.desc_forepart.trim().length>1000){this.isLargeNum=true;}else{this.isLargeNum=false;}});});},//选中对象后保存相应的数据handleChangeObj(data){constthat=this;让tes=this.$refs["custom-text"].innerHTML;data.forEach(i=>{if(!this.$refs["custom-text"].innerHTML.includes(i.obj_id+'-'+i.obj_name)){consttemplates=`@${i.obj_name}`;tes+=templates;}});//通过添加span属性获取id+name来标识唯一性,有利于重复增删改,this.temps=tes;this.isSHowaddObject=false;this.objectList=数据;setTimeout(()=>{this.matter.desc_forepart=this.$refs["custom-text"].innerText;this.matter.desc_objs=this.objectList;this.matter.description=this.$refs["custom-text"].innerTex吨;如果(that.matter.desc_forepart.trim().length>1000){this.isLargeNum=true;}else{this.isLargeNum=false;}});//this.$set(this.workOrderQuery[this.findVluaindex],'value',data)},