在输入框中选中被()括起来的文字并实现修改()中的文字 vue

Posted 2022-11-28 咖啡壶子

前情回顾：上一个需求https://blog.csdn.net/TroyeSivanlp/article/details/125604630
这个大致实现了需求，但是出现了很大问题，如果你一直点击space键，然后再失焦，再聚焦，再点击，选中的文字就会被点击的space键替换，这样循环，输入框中的字就都没了。

再次实现

修改需求，修改实现方式：复现语句，根据【】的数量，生成不同数量的input框，修改input框的值，实现修改【】括号中的内容。

上代码

template中的代码：

 <el-row v-show="inputChangeFlag == false">
               <el-input 
               v-model="form.content" 
               class="bigmodel"
                type="textarea"
               :rows="5"
               disabled
               ></el-input>
                
              </el-row>
               <el-row >
               <el-col type="flex" justify="start" align="middle">
                  <el-input 
                  v-for="(item,index) in strNum" 
                  :key="index" 
                  :placeholder="item" 
                  class="inputModel"
                  v-model="inputData[index]"
                  @change="blurFunction(inputData[index],index)"
                  ></el-input>
                </el-col>
              </el-row>

需要声明的变量以及需要的方法：

data()
	return
		inputChangeFlag: true,
    	inputData :[],
	

methods:
    // 当模板被点击的时候触发的事件
    handleCurrentChange(item) 
      this.MailModelFlag = false;
      this.inputChangeFlag = false;
      this.form.content = item.MODELCONTENT;
      this.form.zlzt = item.MODELNAME;
      this.strNum = [];
      this.num=1;
       let i = 0;
      let a1 = /\\【(.+?)\\】/g; //正则获取小括号
      let a2 = this.form.content.match(a1).toString(); //因为输出的是数组，所以得转化成字符串
      let arrStr = a2.split(",");
      arrStr.forEach((item) => 
        this.strNum.push(item.substring(1,item.length-1));
      );
      console.log(this.strNum);
      this.inputData=[]
    ,
    // 刚开始用的是blur事件，会发现没有输入值失焦的话，表单中【】相对应的值会变成undefined，所以现在该成@change事件，当值发生改变并且失去焦点才会触发该事件。
    blurFunction(value,index)
    	if(value!='')
      	let str = new RegExp(this.strNum[index]+"+")
      	//  this.form.content
      	console.log(str);
      	this.form.content=this.form.content.replace(str,value);
    	
    ,