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

前情回顾:上一个需求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);
    	}
    },
}
 	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咖啡壶子

你的鼓励奖是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值