低代码平台-事件绑定思路

页面：选择节点，选择或者输入事件（click,blur），选择处理方法，输入字符串类型的入参（多个入参与逗号隔开）

事件名：可输入下拉框数据为 [{label:'click',value:'click'}]

方法名：下拉框数据为 [{label:'formSubmit',value:'formSubmit'}]

入参：输入框数据为 'id1,id2'

如何绑定事件：

vue的h函数中进行绑定

let eventName = 'click' // 从页面传过来
let methodName = 'formSubmit' // 页面传过来
let paramstr = 'id1,id2' // 页面传过来
let params = paramstr.split(',')
let defaultParam = dataList // 整个页面对象
let f = ()=>{pageEvents[methodName](dataList,...params)}
let nativeOn = {}
nativeOn[eventName] = f
h('el-button',{'nativeOn':nativeOn})

pageEvents 哪里来？

pageEvents是一个对象

{'formSubmit':functoin(){},'formValidate':function(){}}

是需要动态改变的，由用户从输入框录入后，保存到数据库，页面查询数据库拿到字符串，字符串转为对象。

created() {
    // jsContent 是从数据库取出来
    let jsContent = `
    return {
      'formSubmit':(dataList,p1,p2)=>{
        console.log('formSubmit',dataList,p1,p2)
      }
    }
    `
    let m = new Function(jsContent)
    this.pageEvents = m()
}

jsContent 中有时候需要调用公用方法，公共方法是当前页面 import 进来的，要怎么做？

import {getFormModel} from '@/util/util.js'

created() {
    // jsContent 是从数据库取出来
    let jsContent = `
    return {
      'formSubmit':(dataList,p1,p2)=>{
        getFormModel(dataList)
        console.log('formSubmit',dataList,p1,p2)
      }
    }
    `
    let m = new Function('getFormModel',jsContent) // 这里放的是函数名称-字符串类型的
    this.pageEvents = m(getFormModel) // 这里放函数
}

如果公用方法是多个怎么处理？

import {allMethods} from '@/util/util.js'
// allMethods 是一个对象，存入多个函数
created() {
    const names = Object.keys(allMethods)  //取出多个函数名称
    const vals = Object.values(allMethods) //取出多个函数

    // jsContent 是从数据库取出来
    let jsContent = `
    return {
      'formSubmit':(dataList,p1,p2)=>{
        getFormModel(dataList)
        console.log('formSubmit',dataList,p1,p2)
      }
    }
    `
    let m = new Function(...names,jsContent) // 这里放的是多个函数名称
    this.pageEvents = m(...vals) // 这里放多个函数
}

import {allMethods} from '@/util/util.js'

这行现在是静态导入，但实际情况是需要动态导入的，这个如何实现？

待续...