之前一直在研究可视化和零代码搭建相关产品和技术, 最近逛 github
的时候发现一个比较有意思的拖拽开源组件, 就用 vue3
简单撸了一个拖拽搭建的小demo, 供大家参考学习.
可视化拖拽demo项目介绍
空闲时间简单设计了几个功能, 如下:
支持设置拖拽单位(阈值)
支持撤销重做
支持导入和导出 json
支持组件全选 / 组合
技提供了常用的四个基础组件(文本, 图片, 音频, 视频)
因为之前我的技术栈主要是react
, 为了让更多小伙伴低成本的上手, 这里项目采用大家比较熟悉的vue3 + vite
.
项目采用的拖拽开源库 es-drager
, 当然为了更好的显示代码, 也使用了 monaco-editor
, 如下是它的代码展示效果:
![5b2990424727cd9b3e7b38b9be8a99c6.png](https://img-blog.csdnimg.cn/img_convert/5b2990424727cd9b3e7b38b9be8a99c6.png)
整体来说展示效果还是不错的, 为开源作者们点赞.
完整项目仓库地址: https://github.com/MrXujiang/vue3-drag-demo
线上演示地址: drag_demo 可视化拖拽
一些技术实现的介绍
我之前在社区和公众号也写了很多低代码的技术上实现原理, 如
上面的demo主要实现思路拆解如