如今各大平台都在推零代码,最出名的有易企秀、那么探索一下零代码的实现思路。本系统实现的一个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到组件数组中。即可完成渲染