实现简易可视化拖拽生成页面

1.背景

由于一些简单、重复的页面，需要开发，会耗费大量人力和物力。因此一般会利用低代码平台，进行拖拽生成，下面就是实现简易可视化拖拽生成页面

2 简易可视化拖拽生成页面具体实现

2.1 整体页面布局

整个页面分为顶栏、内容区上下两部分，内容区又细分物料区、展示区、配置栏等三部分。其中物料区由ComponentStack实现。展示区由RenderEngine实现，配置栏由ConfigPanel实现

2.1.1 主页面的实现:

代码具体实现：

2.1.2 物料区（ComponentStack）实现

物料区主要负责从从组件列表获取到所有组件，进行遍历展示，并通过onHandleDrag事件实现可拖拽

代码具体实现：

2.1.3展示区(RenderEngine)实现

如果组件在展示区的某一位置拖拽停止，就往展示区增加该组件或者该节点，并且进行展示

2.1.4 配置栏(ConfigPanel)实现

如果点击展示区域内的某一组件，就可通过组件id
找到该组件配置，让其配置在配置栏进行回显，配置栏也可支持组件属性的修改

2.2 运行效果

3. 项目源码地址:

点击跳转源码