Vue3 实现的低代码编辑器
在前几年的工作中, 完成过多个用于解决不同场景的低代码平台。 最近几个月空闲时间, 自己重新实现了一个当作偷懒工具使用的低代码编辑器。
该编辑器核心功能已基本完善。只需添加组件(物料)和更改部分逻辑，即可使用。
更多功能正在持续迭代中。
github地址:github地址
编辑器地址: Npm地址
在线预览: 编辑器预览
一、什么时候使用低代码？
web业务场景中, 经常会遇到以下场景，是否让你头疼不已：
1.重复的表单/工单/发票。
2.大量活动海报。
3.重复的ToB管理页面。
4.各类问卷。
5.配置化的流程/节点图
在经历麻木搬砖完成重复业务后, 对应的场景下，使用低代码平台常常是最好的解决方案。
众所周知，低代码平台常有以下优缺点。
低代码平台的主要优点
- 高效快速的生成页面
- 无需开发人员参与，完成提效
- 可视化操作
- ...
低代码平台的主要缺点
- 复杂业务难以支撑。复杂业务往往会使得低代码平台更加复杂。
- 上手成本。 小白看文档都不好使, 所以在组件(物料)设计时，往往需要考虑组件复杂度
- 问题定位困难。
- 组件、模板升级数据处理麻烦。如何维护组件版本和模板版本常常是迭代中的拦路虎。
- ...
所以我们在决定是否使用低代码实现时，往往需要判断的第一个条件是: 是否符合场景需求。
场景的应用比技术实现往往更加重要！
二、如何实现低代码编辑器
市面上的低代码编辑器通常包含六个模块。
以Vue-page-editor为例
1. 编辑器的构成
一个基本的编辑器构成由以下六部分组成。
代码层面主要结构如下
局部结构说明
1.布局选择器
默认设置有全局布局和左右布局。同时支持自定义布局工具。通过Canvas划分画布，划分模块后可通过模块全局样式调整宽度。
2.组件选择器
包含各类页面构成组件，根据业务构建各类基础组件。每个组件都可修改组件对外默认数据、样式、事件通信、
3.工具选择器
包含数据保存、预览、屏幕快照、全屏等基础功能。用户也是用插槽自定义功能
4.组件属性编辑器
可编辑一个组件的对外数据、样式、事件等属性。根据需求设置属性。
5.全局属性编辑器
可编辑一个模块的对外数据、样式、事件等属性。比如左右布局，就是左右两个模块。
6.模块渲染器（画布区）
模块的渲染。内部可挂载多个组件。
2.编辑器的使用
3.页面配置后生成后完整代码
低代码编辑器的数据模式是我们常用数据驱动视图。
会在编辑器的顶层设计一个全局数据globalEditorData。编辑器的所有新增组件、属性编辑、布局更改等操作。都在在编辑这个全局数据。
我们以选择左右布局，且在左模块配置轮播图、文章列表，右模块设置公告为例。
可以得到如下代码结构:
{
"version": "1.0.0",
"layout": "1",
"layoutConfig": [
{
"type": "BOX",
"children": [
{
"type": "EDITOR",
"key": "1",
"placeholder": "拖拽控件到此区域",
"style": {
"width": "76%",
"minHeight": "300px",
"marginRight": "8px"
}
},
{
"type": "EDITOR",
"key": "2",
"placeholder": "拖拽控件到此区域",
"style": {
"width": "calc(24% - 8px)",
"minHeight": "300px",
"marginRight": "0"
}
}
]
}
],
"compConfig": {
"1": [
{
"version": "1.0.0",
"type": "BANNER",
"layout": "1",
"modules": {
"1": [
"1"
],
"2": [
"5"
]
},
"data": {
"title": "轮播图",
"slogan": "一群简单的学习爱好者",
"banners": [
"https://s1.ax1x.com/2020/09/29/0Zc6zD.jpg",
"https://s1.ax1x.com/2020/09/29/0ZcgQe.jpg",
"https://s1.ax1x.com/2020/09/29/0ZcyRO.jpg",
"https://s1.ax1x.com/2020/09/29/0Zc2sH.jpg"
],
"jumpUrl": ""
},
"style": {
"height": 500,
"interval": 5000
},
"event": {
"click": {}
},
"id": "V7spTFsGY8A3yH1gGSesn",
"label": "轮播图"
},
{
"version": "1.0.0",
"type": "ARTICLE",
"layout": "1",
"modules": {
"1": [
"1"
],
"2": [
"5"
]
},
"data": {
"title": "文章列表",
"icon": "",
"params": {
"cateKey": ""
},
"jumpUrl": ""
},
"style": {
"backgroundColor": ""
},
"event": {},
"id": "xSTKf_kxtBHQXtb34Dknr",
"label": "文章列表"
}
],
"2": [
{
"version": "2.0.0",
"type": "NOTICE",
"layout": "2",
"modules": {
"1": [
"2"
],
"2": [
"5"
]
},
"data": {
"title": "公告",
"urlParams": {
"url": "",
"type": "_blank"
}
},
"style": {},
"event": {},
"id": "ZNbVDTowBmgFDdVWXGekS",
"label": "公告"
}
]
}
}
通过数据我们可以看到,组件添加、属性修改、布局修改等操作都是在修改globalEditorData数据源。也是我们最终存储的数据。左侧操作是向布局内添加组件。右侧操作是在修改模块、或组件数据。
1）全局字段说明
1.Version 版本
生成模版的当前版本、用作编辑场景下的版本控制。一般配置后端使用。
2.Layout 当前布局选择
当前布局key值，比如这里的“1” 代值左右布局。
3.LayoutConfig 布局配置
当前布局的配置类型。用数组+树的组合使得布局可以多层级。其中children中的TYPE控制布局的所属。BOX为外层盒子、EDITOR为内层模块。
4.CompConfig 组件数据
主要是存储布局数据。与LayouConfig对应。这样分开存储可以减少数据的处理数量
三、编辑器设计相关文章
单个组件的属性与实现可参考以下文章。
1.单个组件设计
2.自定义布局设计
3.组件通信
