例如这种花括号要替换为input,生成效果图如图2,
图2解决思路是将上面的一段文字按照{分割成数组,然后页面遍历这个数组
handTK(tkString, t1, tkArr) {
var s1 = tkString.match(/\{(.+?)\}/g);
if (s1 != null && s1.length > 0) {
var obj = {};
var s = tkString.split(s1[0]);
obj.question = s[0];
obj.questionType = s1[0];
obj.input = "";
obj.flag = "0";
let p = s1[0].replace(/,(.+?)\}/g,"");
p = p.replace("{","");
obj.placeholder = p
let t = s1[0];
t = t.replace(/\{(.+?),/g , "");
t = t.replace("}","");
obj.flagType = t;
tkArr.push(obj);
if (s[1] != "" && s[1] != undefined && s[1] != null) {
this.handTK(s[1], t1, tkArr);
}
} else {
if (tkArr.length > 0) {
var obj = {};
obj.question = tkString;
obj.questionType = "";
obj.input = "";
obj.flag = "1";
obj.placeholder = "";
obj.flagType = "";
tkArr.push(obj);
}
}
},
调用处
//填空题
if (this.dimensionList[i].subjectList[j].questionType == "03" &&!this.dimensionList[i].subjectList[j].industryFlag) {
var tkString = this.dimensionList[i].subjectList[j].questionContent;
console.log("填空", tkString);
var tkArr = new Array();
this.handTK(tkString, "", tkArr);
console.log(tkArr);
this.dimensionList[i].subjectList[j].newCommentTK = tkArr;
}
结构
<el-col :span="23">
<span v-for="(commentTK,indexTK) in dEle.newCommentTK" :key="indexTK" >
<span v-html="commentTK.question"></span>
<span v-if="commentTK.flag =='0'">
<span style="display:inline-block;height:auto;width:110px;margin-right:8px" >
<el-input
class="write-input"
v-model="commentTK.input"
:disabled ="isChange"
:placeholder="commentTK.placeholder"
maxLength='20'
size="small"
style="border:#fff;outline:none;"
@input="inputWriteTK($event , commentTK,dEle,dItem , dIndx , indexTK)"
@blur="blurWriteTK(commentTK,dEle,dItem.questionnaireId,dEle.dimensionId,dEle.id,dEle.newCommentTK)"
></el-input>
</span>
</span>
</span>
网友评论