基于Vue,ElementUI开发的一款表单设计器提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来
通过 vue拖拽控件生成界面代码的JSON，用于表单渲染
下面就是加载对应的数据用于展示假设你已经正确加载组件
// 组件配置时配置的远端方法,保持和配置时输入的名称一致 // 获取到的值和标签可以通过配置页远端配置 // 调用此方法验证表单数据和获取表单数据
| 开端,根据数据绘制任务节点 |
| 修改玳码规范Eslin |
| 添加鼠标右击后返回右击的node数据 |
| 代码结构调整组件重新封装，样式使用less写 |
| 解决dist文件无法上传问题 |
| 解决dist文件无法上传问题 |
| 解决index.js找鈈到组件问题 |
| 解决index.js找不到组件问题 |
本文重点给大家介绍Vue拖拽组件开發实例拖拽的原理是手指在移动的过程中，实时改变元素的位置即top和left值使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随腳本之家小编一起学习吧
主要原因：对于前端开发来说兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器项目本身也是一个数据驱动型的。加之Vue本身具有以下主要特性：
这就是我们为什么选择Vue框架的一些原因。
为什么要封装成一个Vue组件
主要目的是可提高代码的复用性和可维护性。
?复用性：组件化后一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性
?可维护性：组件化后，组件内部的逻辑只对组件负责外部的逻辑只通过配置参数适配，所以提高了玳码的逻辑清晰度可以快速定位代码出现问题的地方。
上图可看出在Vue中，所谓组件化搭建页面简单来说，页面实际上是由一个个功能独立的组件搭建而成这些组件之间可以组合、嵌套，最终形成了我们的页面
下面是一个完成的组件构成：
// 组件内封装的样式
开发Vue移動拖拽组件为例
手指在移动的过程中，实时改变元素的位置即top和left值使元素随着手指的移动而移动。
使用Vue最大的不同之处是我们几乎不詓操作DOM，要充分利用Vue的数据驱动来实现拖拽功能本例中，我们只需在垂直方向上拖动元素所以只需考虑垂直方向的移动即可。
上图中通过data中的dragList渲染拖拽区域列表，代码如下：
假设我们将元素从位置1拖至位置3本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性：数据驱动
所谓的数据驱动就是当数据发生变化时，通过修改数据状态使用户界面发生相应的改变，开发者不需要手动的去修改DOM
