1、低代码

现在市面上各种低代码平台基本思路都是通过拖拽生成页面。一般包括四大部分

• 工具栏： 保存、预览、重做、撤销、清空画布等动作
• 组件模版列表：初始多个模版列表，可以拖动选择
• 画布布局：类似一个 react-grid-layout 组件，插入的组件作为一个grid-item，可以拖动位置和调整大小。另外需要加入一些右击、改变图层、上移下移等功能
• 组件参数配置：给插入的自己配置属性，如动画、点击事件等

对于页面效果比较简单、单一采用低代码，方便业务产品迅速看到效果，但是页面有些复杂联动的时候就比较难处理。

2、代码设计思路

页面四大部分之间是互相联动的，当采用vue开发需要考虑组件之间通讯，涉及组件较多可以考虑使用vuex

2.1 工具栏 Toolbar

2.2 组件模版列表 ComponentList

• @dragstart 通过e.dataTransfer.setData

2.3 画布 Editor

• position:relative
• @drop 通过e.dataTransfer.getData 插入选择的模版

Grid 背景网格线

• 通过svg绘制

Shape 组件包裹器

• position:absolute
• 绘制八个点，getShapeStyle计算位置
• 监听mouse事件来拖动/缩放
• 通过getShapeStyle设置style

<!--画布组件列表展示-->
<Shape v-for="(item, index) in componentData"
    :defaultStyle="item.style"
    :style="getShapeStyle(item.style, index)"
    :key="item.id"
    :active="item === curComponent"
    :element="item"
    :zIndex="index"
>
    <component
        class="component"
        :is="item.component"
        :style="getComponentStyle(item.style)"
        :propValue="item.propValue"
    />
</Shape>

<!--Shape组件展示-->
<template>
    <div class="shape" :class="{ active: this.active }" @click="selectCurComponent" @mousedown="handleMouseDown"
    @contextmenu="handleContextMenu">
        <div
            class="shape-point"
            v-for="(item, index) in (active? pointList : [])"
            @mousedown="handleMouseDownOnPoint(item)"
            :key="index"
            :style="getPointStyle(item)">
        </div>
        <slot></slot>
    </div>
</template>

ContextMenu 右击菜单

MarkLine 标线

• 横向三根、纵向三根，当前组件与原有组件上中下位置比较靠近，则显示；
• 通过isNearly函数判断当前组件位置距离画布列表小于diff像素则自动吸附

components.forEach(component=>{
     Object.keys(conditions).forEach(topLeft=>{
          if(conditions[topLeft].isNearly){
               //重置当前组件位置达到吸附效果
              // 显示标线
          }
     }
}

Area 选中区域

2.4 组件参数配置

推荐文章 可视化拖拽组件库一些技术要点原理分析

欢迎关注我的前端自检清单，我和你一起成长