1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Vue中使用New Function自定义字符串函数 实现自定义脚本

Vue中使用New Function自定义字符串函数 实现自定义脚本

时间:2021-11-23 18:00:48

相关推荐

Vue中使用New Function自定义字符串函数 实现自定义脚本

我们在实现自定义表单时,有些业务需要定制,例如某些特殊值的校验,关联组件的有效值判定,或者某些特定业务的提示。例如采购单据的金额大于设定值时,需标明一些特殊备注,这种限制就能通过自定义脚本来实现了。实现的思路时,管理员将JS脚本编写入表单模板对应的脚本中,表单在填写过程中或者提交前去调用该JS脚本,进行true 与false的返回,false则是终止提交数据,并做出相应的提示。这里使用的JS函数 new Function('',obj),使用例程如:

formSubmitDo() {

if (

this.formConf.beforeSubmit != null &&

this.formConf.beforeSubmit.length > 0

) {

try {

let form = JSON.stringify(this.form);

let newFunc = new Function("form", this.formConf.beforeSubmit);

return newFunc(form);

} catch (e) {

console.log("提交表单前事件处理异常", e);

return false;

}

}

return true;

}

解释:new Function 前面参数是字符串入参的名称,我们在自定义脚本可以去使用这些入参,最后的参数是自定义的脚本字符串,最后使用时就直接newFunc(form); 并传入入参,有返回值也可以接收返回值。

自定义字脚本符串如图,可以使用入参变量,注意入参变量只能是字符串如果是对象,先进行序列化字符串,在转回JSOn,还可以使用全局的变量以及函数。

let formData = JSON.parse(form);let result={isOk:true,newForm:formData};try{if(formData.totalMoney>100){//MyCommonTip.fail('金额太大请检查!');}}catch(e){console.log('表单提交前执行异常',e);result.isOk =false;}return result;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。