html 编辑器 拖动,可视化拖拽页面编辑器 一

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

技术框架采用Vue3 + Typescript + ElementPlus

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

html 编辑器 拖动,可视化拖拽页面编辑器 一_第1张图片

最终效果

html 编辑器 拖动,可视化拖拽页面编辑器 一_第2张图片

实现功能:

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

从菜单拖拽组件到容器;

单选、多选;

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

组件拖拽调整宽高;

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

操作栏按钮与命令

撤销、重做;

导入、导出;

置顶、置底;

删除、清空;

组件绑定值;

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

一、项目搭建与页面布局

通过vue-cli生成项目

vue create visual-editor-vue

复制代码

选择手动配置

选择配置如下:

html 编辑器 拖动,可视化拖拽页面编辑器 一_第3张图片

选择vue3.x版本

html 编辑器 拖动,可视化拖拽页面编辑器 一_第4张图片

这一步选y,

你可能感兴趣的:(html,编辑器,拖动)