java和vue实现拖拽可视化_可视化拖拽页面编辑器 一__Vue.js

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

theme: juejin

highlight:

前端技术日益发展,组件化日益成熟,作为一个前端,每天的工作就是用组件堆砌页面,有没有一种方式可以像CocosCreator,通过组件+脚本绑定的方式来实现我们的页面和功能,今天我们就来实现一个提高生产力的工具 可视化拖拽页面编辑器, 让产品和UI通过拖拽编辑页面,生产自己想要的页面。

技术框架采用Vue3 + Typescript + ElementPlus

每个章节下边都会贴出对应commit代码,方便大家对比学习

d6ef0762982ca35e5273dfb66d735dae.png

最终效果

69900a1c5b3a11404ce1e5f2330e4411.png

实现功能:

主页面结构:左侧可选组件列表、中间容器画布、右侧编辑组件定义好的属性

从菜单拖拽组件到容器;

单选、多选;

容器内的组件可以拖拽移动位置;

组件拖拽调整宽高;

组件拖拽贴边,显示辅助线;

操作栏按钮与命令

撤销、重做;

导入、导出;

置顶、置底;

删除、清空;

组件绑定值;

根据组件标识,通过作用域插槽自定义某个组件的行为

预览地址

一、项目搭建与页面布局

通过vue-cli生成项目

vue create visual-editor-vue选择手动配置

选择配置如下:

cb43a27572c02a80c5ca729b29cee392.png

选择vue

你可能感兴趣的:(java和vue实现拖拽可视化)