[发明专利]用于定义页面的可视化拖拽引擎及自定义页面的方法

说明书

本发明公开了用于定义页面的可视化拖拽引擎及自定义页面的方法，属于前端页面开发技术领域，要解决的技术问题为如何通过可视化拖拽引擎自定义页面。引擎通过编辑器提供图形界面编排，引擎包括：组件数据维护模块，用于通过一个数组componentData维护编辑器中的数据；配置模块，对于可拖拽的组件，用于为所述组件添加一个draggable属性，对于要拖拽到画布中的每个组件，用于通过push()方法将所述组件的数据添加到数组componentData，并通过组件列表的形式展示所述列表；拖拽渲染模块，用于使用v‑for指令遍历数组componentData，将每一个组件逐个拖拽渲染到画布。

技术领域

本发明涉及前端页面开发技术领域，具体地说是用于定义页面的可视化拖拽引擎及自定义页面的方法。

背景技术

前端技术日益发展，组件化日益成熟，作为一个前端，每天的工作就是用组件堆砌页面，为了更简单快捷的构建页面，通过组件+脚本绑定的方式来实现我们的页面和功能。

如何通过可视化拖拽引擎自定义页面，是需要解决的技术问题。

发明内容

本发明的技术任务是针对以上不足，提供用于定义页面的可视化拖拽引擎及自定义页面的方法，来解决如何通过可视化拖拽引擎自定义页面的技术问题。

第一方面，本发明一种用于定义页面的可视化拖拽引擎，所述引擎通过编辑器提供图形界面编排，所述引擎包括：

组件数据维护模块，所述组件数据维护模块用于通过一个数组componentData维护编辑器中的数据；

配置模块，对于可拖拽的组件，所述配置模块与编辑器配合，用于为所述组件添加一个draggable属性，对于要拖拽到画布中的每个组件，用于通过push()方法将所述组件的数据添加到数组componentData，并通过组件列表的形式展示所述列表；

拖拽渲染模块，所述拖拽渲染模块与所述编辑器配合，用于使用v-for指令遍历数组componentData，将每一个组件逐个拖拽渲染到画布。

作为优选，对于要拖拽到画布中的组件，所述配置模块与所述编辑器配合，用于为所述组件的拖拽配置两个事件，分别为dragstart事件和drop事件；

所述dragstart事件在拖拽开启时触发，用于将当前拖拽组件的数据传递给画布；

所述drop事件在拖拽结束时触发，用于接收当前拖拽组件的数据；

对应的，将组件拖拽渲染到画布时，所述拖拽渲染模块与所述编辑器配合，用于执行如下：在拖拽开启时触发dragstart事件，将当前拖拽组件的数据传递给画布；在拖拽结束时触发drop事件，接收当前拖拽组件的数据。

作为优选，所述配置模块与编辑器配合还用于执行如下：将每一个组件逐个拖拽渲染到画布之前，将画布设为相对定位position:relative，而后将每一个组件设为绝对定位position:absolute。

作为优选，将组件拖拽渲染到画布时，所述拖拽渲染模块与所述编辑器配合，用于监听如下三个事件来进行移动：

mousedown事件，所述mousedown事件执行如下：在组件上按下鼠标时，记录组件当前的位置，组件的位置表示为xy坐标；

mousemove事件，所述mousemove事件执行如下：每次鼠标移动时，都用当前最新的xy坐标减去最开始的xy坐标，从而计算出移动距离，再改变组件位置；

mouseup事件，所述mouseup事件执行如下：鼠标抬起时结束移动。

作为优选，将组件拖拽渲染到画布时，所述拖拽渲染模块与所述编辑器配合，用于按照组件的数据顺序来分配图层层级；