低代码难点

事件绑定、触发和流转，这一步我还没有很好思路。大家有什么想法可以评论留言。

设计

一、页面布局

按照传统做法就是左边组件拖动，中间是页面设计，右边是属性的设置，如下：

布局组件可以嵌套任何组件，这不比那些表单设计厉害一点点，嘻嘻

二、数据结构

[  {    id: "",    name: "行", // 组件名称    code: "el-row", // 组件渲染，放到component的is使用    type: "layout", // 组件类型，layout可以嵌套，可以在这个组件放其他组件，比如el-row，el-col，el-card，el-form，有子级的    children: [], // 子级
    // 组件属性
    props: {
      gutter: 0,
      justify: "start",
      align: null,
    },
    // 组件样式
    style: {
      radiusType: "all",
      borderType: "all",
    },
    // 表单项属性
    formItem: {
      label: "标题",
      labelWidth: "",
      required: false,
    },
    // 下拉框，多选框，单选框等数据
    dataset: {
      type: 'custom', // custom  fetch
      labelKey: '',
      valueKey: '',
      options: [
        {
          label: "",
          value: "",
        },
      ],
      fetch: {
        url: '',
        method: '',
        params: {}
      },
      fetchResult: []
    },
    // 表格字段
    columns: [
      {
        prop: "",
        label: "",
        sortable: "",
      },
    ],
    // 动作
    events: {
      click: {
        id: '',
        actions: [{
          id: '',
          name: '',
          actionType: 'message',
          props: {
            message: '就够大家好',
            type: 'success'
          }
        }]
      }
    },
  },
]

三、数据设置

数据是放到dataset里面，有自定义的数据，也有发送请求拿到的数据

四、事件设置

事件这块是最难的，比如一个表单，点击表单的提交按钮发送请求，怎么把表单的数据提交给接口？提交成功之后，怎么把结果反馈进行下一步的动作？

点击事件发送请求，把请求成功拿到的结果赋给某个组件，比如简单的CRUD，拿到的数据怎么赋给表格组件？总页数怎么赋给页码组件？等等。。。

事件触发？？
用eval的话，把事件处理成字符串，放到eval执行；或者是用new Funtion()，但是new Funtion()变量是全局的。

const actions = events[i].actions;
const arr = [];
for (let j = 0; j < actions.length; j++) {
    const acitem = actions[j];
    if (acitem.actionType === "message") {
      arr.push(function () {
        ElMessage({
          type: acitem.props.type,
          message: acitem.props.message,
        });
      });
    }
    if (acitem.actionType === "dialog") {
      arr.push(function () {
        const node = designStore.getNodeById(designStore.views, acitem.props.id)
        node.props.value = acitem.props.value
      });
    }
    }
    res[i] = eval(`() => {
    arr.forEach(item => {
      item()
    })
}`);

这是最近做的一个项目的一些设计，在这开发越来越卷，越不值钱的年代，低代码是个趋势，以后估计前端开发都是定义人员了，专门在低代码平台画页面。

原文链接：https://juejin.cn/post/7351770402047754291 作者：我是饿额