vue2低代码平台搭建（二）揭秘页面设计器

前言

大家好，我是L丶Y。我们走进了低代码的世界，这一章节我们要开始干货内容了，来探索一下低代码开发的核心 —— 页面设计器。

我们知道，低代码开发平台都是通过拖拉拽可视化的页面设计器进行页面开发的，在这一章节，我们来探索一下页面设计器的实现方式。下图中，我们截取了几款优秀的低代码产品的页面设计器界面。

可以看到，大多数的页面设计器都包含了如下所示的几个区域：

• 最上方是操作栏，我们可进行页面的保存、预览、查看json信息、查看代码等操作；
• 左侧是组件列表，当然也可以添加一些切换，让我们的左侧区域支持查看页面树信息、配置数据源等其他操作；
• 中间是画布区域，我们可以将左侧的组件拖动到画布中，当然也支持画布中组件的赋值、删除等操作；
• 右侧是属性配置区域，当我们在画布中选中某个组件时，可以在右侧的属性配置区域罗列出当前组件可支持动态配置的属性，修改了属性后可以在画布中看到对应组件的样式变化。

 图片截取自宜搭，仅用于区域展示，与本篇内容无关

下面，我们按上述的区域划分来看一下页面设计器区域都是如何实现的。

组件列表

首先，我们来看一下左侧的组件列表，列表中的每个组件，我们都需要使用一段json来进行描述，这段json我们将它称之为 元数据，元数据中描述了当前组件的中文名称，在列表中显示的图标及描述，和组件可进行配置的一些动态属性。我们以输入框组件为例，它的元数据大致可以定义为如下的样子：

{
	code: "MyInput",
	name: "输入框",
	desc: "输入框的描述",
	icon: "input",
	props: {
		name: "字段名称",
		label: "label名称",
		labelCol: "",
		wrapperCol: "",
		required: false,
	}
}
复制代码

那么左侧的组件列表实际上就是这样的一个元数据对象组成的数组遍历而来的。

拖动

再来看一下将左侧组件列表的组件拖动到画布是如何实现的。拖动又分为顺序排列布局的拖动及自由布局拖动。顺序排列布局的拖动是指拖动到画布中的组件是自上而下顺序排列的，可以通过拖动调整上下顺序，当然我们也可以增加分栏这样的布局类型组件，实现组件的左右排列；自由布局拖动是指拖动到画布中的组件位置是自由的，我们松开鼠标的位置，就是这个组件在画布中的位置。考虑到我们主要服务