业务场景: 在某个业务场景中, 我们需要在数据库配置ts文件路径,和需要调用的函数名称, 前端需要再指定的场景下,触发对应的函数, 并执行处理逻辑,返回结果.

实现: 这是一个数据库配置生成的动态表单 + 动态校验的例子, 需要引用动态的函数校验

1. 任意一个js文件,
   common1.ts

const funcation1 = ({value, formParam}) =>{console.log('我进来了1',value,formParam);// todo: 特殊逻辑处理return '我出去了';
}
const funcation2 = ({value, formParam}) =>{console.log('我进来了2',value,formParam);// todo: 特殊逻辑处理return '我出去了';
}export {
funcation1,
funcation2
}

2. 在需要调用的位置, 加入如下代码.
   main.vue

<script>/**动态调用函数*/const loadAndCallFunction = async(modelPath, funcionName, param) =>{try{// 动态导入模块const module = await import(`./${modelPath}`);// 检查模块是否包含指定的函数if(typeof module[funcionName] === 'function') {// 调用函数并返回结果return module[funcionName](param);}throw new Error(`Function ${funcionName} not found In module ${modelPath}`)}catch(error) {throw error}}const rules = reactive<any>({});// 根据后端配置,动态渲染表单rulesconst initRule = (formItems) =>{formItems.map((item)=>{rules[item.field] =  item.rule !== undefined ? item.rule : [{required:false}];if(item.validator !== undefined) {const validator = {validator: async (value, cb)=>{//const result:any = await loadAndCallFunction(item.path, item.function, {value, formValue})const result:any = await loadAndCallFunction('validator/common/common1', 'function1', {value, formValue});if(result === '' || result === undefined){cb();} else {cb(result);}}}	}})}
</script>

最终的运行效果: