以开源的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.总结
实际上一般不会让你重头开发一个低代码平台,这里更多的只是展示一下原理,方便二次开发