低代码平台原理解析

以开源的vform为例

低代码大抵可以分为三个部分，左侧组件列表，中间的可拖动模块，右侧的设置。
原理其实并不复杂，本质上来说就是遍历数组生成对应组件。

1.左侧菜单

首先我们定义一个数据js文件用来记录每个组件的基础设置

export const elements= [
  {
  	key:'',  //组件标识
    type: 'input',  //组件类型
    icon: '',  //组件图标
    label:'单行输入',  //组件名称
    options: {  //组件设置
      defaultValue:'',  //默认值
      hidden: false,  //是否隐藏
      customClass: '',  //自定义css类名
    }
  },
  ...
]

左侧菜单通过遍历elements生成

2.可拖动模块

elements的每一个子元素对应一个vue文件
定义一个总的index.vue文件将这些vue文件全部引入
比较优雅的写法是通过import.meta.globEager得到所有的vue文件名

//vue3写法,vue3不支持require
const modules = import.meta.globEager('./*.vue')
export default {
  install(app) {
    for (const path in modules) {
      let cname = modules[path].default.name
      app.component(cname, modules[path].default)
    }
  }
}

在index.vue文件中定义一个数组 widgetList，用来生成整个表单的组件
遍历widgetList并利用vue内置的component动态组件来生成对应组件

<template v-for="widget in widgetList">
	<component :is="getWidgetName(widget)"></component>
</template>

当然，还有最重要的一个东西，拖拽
利用vuedraggable实现，具体使用请查看官网

<draggable :list="widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 300}"
           tag="transition-group" :component-data="{name: 'fade'}"
           handle=".drag-handler" @end="onDragEnd" @add="onDragAdd"   @update="onDragUpdate" :move="checkMove">
  <template #item="{ element: widget, index }">
    <div class="transition-group-el">
	  <template v-if="'container' === widget.category">
        <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
                   :index-of-parent-list="index" :parent-widget="null">
        </component>	     	
   	  </template>
    </div>
  </template>
</draggable>

3.右侧设置

通过上文组件传递的widget数据显示，同样通过component动态组件生成

4.总结

实际上一般不会让你重头开发一个低代码平台，这里更多的只是展示一下原理，方便二次开发