vue零代码思路浅析

如今各大平台都在推零代码，最出名的有易企秀、那么探索一下零代码的实现思路。本系统实现的一个demo如下

页面布局为，顶部常用菜单，右边为自定义组件，中间为画布，右边为选中组件的属性。还可以添加动画、事件等。 

 主要实现思路为将自定义的组件注册到左边的自定义列表中，同时将组件增加draggable属性，表示该组件可拖动。

<template>
    <div @dragstart="handleDragStart" class="component-list">
        <div v-for="(item, index) in componentList" :key="index" class="list" draggable 
        :data-index="index">
            <span class="iconfont" :class="'icon-' + item.icon"></span>
            <span>{{ item.label }}</span>
        </div>
    </div>
</template>

思路为监听开始拖动事件，开始拖动时将组件列表中的顺序记录下来。等拖拽完成后再监听drop事件，获取到组件的各种属性后即可将属性push到组件数组中。即可完成渲染