一个简易的低代码

前言

最近接手了一个低代码平台可视化大屏做二次开发，在这里做一些记录。
低代码平台简介：
	低代码平台是一种开发工具，它可以让开发人员使用简单的拖拽和配置来创建应用程序，
	而不需要编写大量的代码。低代码平台通常包括一个可视化的界面编辑器，可以让开发人员通过拖拽和配置来创建应用程序的用户界面和业务逻辑。
1
2
3
4

相关低代码平台
大屏可视化低代码，在线体验 8.3k
amis 可视化编辑器，在线体验 1.9k

拖拽-vuedraggable

理解：低代码通过拖拽组件来快速创建应用程序的用户界面
原生拖拽基本步骤：
	拖拽开始 dragstart
	拖拽移动 dragover
	拖拽结束 dragend
本次demo使用一个支持vue的组件库vuedraggable，快捷的实现拖拽功能
1
2
3
4
5
6

npm i vuedraggable@next
1

组件物料使用element-plus

npm i element-plus
1

代码：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 导入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 或者 import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)   // 使用组件库
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11

<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'

// 需要使用ref
const list1 = ref([
  {
    id: 1,
    tag: 'el-button',
    props: {
      type: 'primary'
    },
    text: '按钮'
  },
  {
    id: 2,
    tag: 'el-input',
    props: {
      placeholder: '请输入内容'
    }
  },
  {
    id: 3,
    tag: 'el-switch'
  }
])

// 组件数据列表
const list2 = ref([])
</script>

<template>
  <el-container class="container">
    <el-aside class="aside" width="200px">
      <draggable
        class="list"
        v-model="list1"
        item-key="id"
        :group="{ name: 'component', pull: 'clone', put: false }"
        :sort="false"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.tag }}
          </div>
        </template>
      </draggable>
    </el-aside>
    <el-main class="main">
      <draggable v-model="list2" item-key="id" class="content" :group="{ name: 'component' }">
        <template #item="{ element }">
          <div class="component">
            <!-- 
              is: 组件名
              v-bind: 动态 props
            -->
            <component :is="element.tag" v-bind="element.props">
              {{ element.text }}
            </component>
          </div>
        </template>
      </draggable>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.container {
  display: flex;
}
.aside {
  background-color: pink;
}
.main {
  flex: 1;
  height: 100vh;
  background-color: skyblue;
  .content{
    background-color: #fff;
    height: 100%;
  }
}
.list {
  .item {
    border: #0083ee 1px solid;
    margin: 10px;
    padding: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

如果对值进行修改可以参考这个git-demo
https://gitee.com/SongTaoo/lowcode