vue---占位符渲染以及获取v-html的值

端午节前夕,后端返回了一个模板字符串,字符串中有两个占位符,要求将替换掉占位符,弄成一个输入框,让用户在输入框中写入信息如图:

输入金额和使用场景
在这里插入图片描述
输入金额和使用场景
在这里插入图片描述

咋说呢,真糟心!!!!下面说下怎么实现吧,其实还是听简单的,就是没弄过这类的需求。

替换占位符

我这是获取单条信息的时候,获取这个模板字符串,如果存在这三个占位符,就给替换掉,自己创建个属性,方便获取对应的值 nameFlag

  getByIdInfo(id).then((res) => {
        if (res.code == 200) {
          this.open = true;
          let reg = /(AMOUNT|USAGE_SCENARIO|EXPIRE_TIME)/g;
          this.msgTele = this.form.smsMsg.replace(reg, (match) => {
            if (match == "AMOUNT") {
              return `<input type="text" nameFlag="amount" class="msgTele"
              v-model="this.amount" placeholder="请输入金额">`;
            } else if (match == "USAGE_SCENARIO") {
              return `<input type="text" nameFlag="usageScenario" class="msgTeleScreen"
              v-model="usageScenario" placeholder="请输入场景">`;
            } else {
              return `<input type="text" nameFlag="exporeTime" class="msgTele" 
              v-model="exporeTime" placeholder="请输入日期">`;
            }
          });
        }
      });

页面渲染

就使用div渲染了,使用v-html进行渲染模板字符串,这里使用了@input进行获取对应的值,使用三个变量接收,目前没找到合适的方法,大佬要是有的话,评论一下

<el-form-item label="短信话术" prop="smsMsg">
    <div class="spanMsgTele" @input="handleChange"  v-html="msgTele"></div>
 </el-form-item>
 
 //获取对应的值
  handleChange(e) {
      let flag = e.target.attributes.nameFlag.value;
      if (flag == "amount") {
        this.amount = e.target.value;
      } else if (flag == "usageScenario") {
        this.usageScenario = e.target.value;
      } else {
        this.exporeTime = e.target.value;
      }
    },

传递参数

后端呢,非要让我把输入的内容拼接到模板字符串中传递过去,我就不明白,为啥不能直接让我传递输入的内容呢,由于是远程对接,我就按他说的来,将变量拼接到模板中。,还是通过匹配占位符进行传递

     let reg = /(AMOUNT|USAGE_SCENARIO|EXPIRE_TIME)/g;
     this.form["smsContent"] = this.form.smsMsg.replace(reg, (match) => {
        if (match == "AMOUNT") {
          return this.amount;
        } else if (match == "USAGE_SCENARIO") {
          return this.usageScenario;
        } else {
          return this.exporeTime;
        }
      });

就这样就可以了,但是呢还有个问题,就是怎么给输入框里面加校验呢,求大佬提供方法!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值