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

454 阅读1分钟

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

输入金额和使用场景 image.png 输入金额和使用场景

image.png

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

替换占位符

我这是获取单条信息的时候,获取这个模板字符串,如果存在这三个占位符,就给替换掉,自己创建个属性,方便获取对应的值 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;
        }
      });

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