可拖拽组件库技术要点

1.编辑器
2.自定义组件
3.拖拽
4.删除组件、调整图层层级
5.放大缩小
6.撤销、重做
7.组件属性设置
8.吸附
9.预览、保存代码
10.绑定事件
11.绑定动画
12.导入PSD
13.手机模式
14.拖拽旋转
15.复制粘贴剪切
16.数据交互
17.发布

页面整体结构 工具栏、组件列表、画布、属性区域
编辑器：
1.用一个数组componentData 维护编辑器（画布）中的数据
2.把组件拖拽到画布中时，使用push将新的组件数据添加到componentData
3.编辑器v-for 便利componentData

{
component:'v-text' //组件名称 提前注册到Vue
label:"文字" //左侧组件列表显示的名字
propValue:"文字" //组件使用的值
icon:"el-icon-edit" //左侧组件列表显示的名字
animation:[],// 动画列表
events: []//事件列表
style: // 组件样式
}
通过is属性识别要渲染哪个组件
拖拽：