低代码平台实现原理及简单低代码平台的实现

1. 低代码平台实现原理说明

1. 简单的低代码平台至少包括组件区、渲染区两个部分，组件区存放不同功能的组件，渲染区实现对拖拽组件的渲染；
2. 组件区主要就是要将外部定义好的组件排列好，且都具有可拖拽性（draggable="true"）；
3. 组件被拖拽时，主要要实现对e.dataTransfer属性的赋值，方便渲染区获取组件信息进行渲染（用@dragstart绑定组件拖拽时要实现的功能）；
4. 渲染区，要通过@dragover.prevent阻止默认行为，实现只对选择的组件所在的层进行拖拽，@drop属性绑定渲染功能实现的逻辑函数；
5. 渲染逻辑主要是，拿到即将被渲染的组件信息，增加一个渲染节点（这一步还未开始渲染），最后所有节点加载完毕后触发新增节点组件的渲染；

2. 低代码平台具体代码及实现步骤

1. 准备几个简单的组件，用来代表将要被拖拽的组件

<template>
  <div>
    我是A组件
  </div>
</template>

<template>
  <div>
    我是B组件
  </div>
</template>

<template>
    <div>我是C组件</div>
</template>

2. 实现拖拽区

• 添加可拖拽性draggable="true"；

<div class="aside">
    <button compName="A" draggable="true" @dragstart="recordData">A组件</button>
    <button compName="B" draggable="true" @dragstart="recordData">B组件</button>
    <button compName="C" draggable="true" @dragstart="recordData">C组件</button>
</div>

• @dragstart="recordData"，实现拖拽逻辑；

recordData(e) {
    console.log('开始拖动了')
    let compName = e.target.getAttribute('compName');
    e.dataTransfer.setData('compName', compName);
}

3. 实现渲染区

• @dragover.prevent阻止默认行为，防止出现多层拖拽的情况；

<div class="viewport" @dragover.prevent @drop="addComp">
    <div :id="item.id" v-for="item in comps"></div>
</div>

• @drop="addComp"，实现渲染

addComp(e) {
    let compName = e.dataTransfer.getData('compName');
    console.log('组件名称:', compName);

    const Comp = this.$options.components[compName];
    // 1.添加一个坑
    this.comps.push({
        id: compName
    });
    this.$nextTick(() => {
        // 2.触发坑的渲染
        new Vue({
            render: Comp.render,
        }).$mount('#' + compName)
    })
}