低代码基础(上) | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天


本文主要讲述低代码入门知识 本期唠一唠拖拽生成

先说说从组件栏到画布的逻辑

从组件栏到画布逻辑

组件栏

首先 写一个componentList 记录各个组件内容、样式

结构大致如下

[   
    {
        animations:Array[0]
        component:"VText"
        events:Object (empty)
        groupStyle:Object (empty)
        icon:"wenben"
        isLock:false
        label:"文字"
        propValue:"双击编辑文字"
        style:{
            color: "",
            fontSize: "",
            fontWeight: 400,
            height: 28,
            letterSpacing: 0,
            lineHeight: "",
            opacity: 1,
            rotate: 0,
            textAlign: "",
            width: 200
           }
    }
   
]

组件栏遍历 componentList v-for渲染出多个组件 同时使用自定义属性:data-index 并在外部盒子上绑定dragstart事件监听 触发 handleDragStart 使用e.dataTransfer.setData 存储拖放时要携带的数据 使用e.target.dataset.index获得自定义属性index的值 以分辨拖拽的是哪个组件

画布

利用componentData来记录画布中的组件 配合v-for来实现实时渲染

componentData具体字段如下 注：实际上就是在componentList 基础上 添加上 位置信息（top，left）和 ID(用于鉴别同类但不同个组件)

[
    {
        animations:Array[0]
        component:"VText"
        events:Object (empty)
        groupStyle:Object (empty)
        icon:"wenben"
        isLock:false
        label:"文字"
        propValue:"双击编辑文字"
        style:{
            color: "",
            fontSize: "",
            fontWeight: 400,
            height: 28,
            letterSpacing: 0,
            lineHeight: "",
            opacity: 1,
            rotate: 0,
            textAlign: "",
            width: 200,
            top:2,
            left:90,
            },
         id:'sdsd'
    }
]

监听drop事件 每拖进来一个就将其push进componentData

拖拽

拖拽与drag系列事件直接相关。

drag

dragstart：开始拖元素触发，作用于拖拽元素 dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素 dragover：当元素拖动到drop元素上时触发，作用于目标元素 drop：当元素放下到drop元素触发，作用于目标元素 dragleave ：当元素离开drop元素时触发，作用于目标元素 drag：每次元素被拖动时会触发，作用于目标元素 dragend：放开拖动元素时触发，作用于目标元素

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

发生在拖动元素上的事件

事件名	触发时机	触发次数
dragstart	当拖动开始时触发	1
drag	拖动开始后反复触发	n
dragend	拖动结束后触发一次	1

发生在目标元素上的事件

事件名	触发时机	触发次数
dragenter	当拖动元素进入目标时触发一次	1
dragover	当拖动元素在目标元素范围内时反复触发	n
drop	拖动元素在目标元素内释放时（设置了dropover事件的前提下	1

demo

组件栏

 <div
        class="menuItem"
        :data-index="index"
        draggable="true"
        v-for="(item,index) in menuList"
        :key='index'>
​
        <span class="iconfont" :class="'icon-' + item.icon"></span>
             <!-- 绑定对应图标 -->
</div>
​

• 设置可拖动
• 监听dragstart 利用API e.dataTransfer.setData 可在拖动时携带数据 便于后续获取

画布区

<div class="wrapper" @dragover="dragover" @drop="addComponents" 
     > </div>

• 监听dragover取消浏览器默认行为 使得元素可拖放（默认情况下浏览器阻止所有拖放操作）
• 监听drop事件 执行生成组件

本期就到这里😋🚀 下一期讲讲如何实现组件的放大缩小。