前言 大家好，我是多肉攻城狮。我们在上一篇文章中走进了低代码的世界，这一章节让我们一起来探索一下页面设计器的实现！！

前言 先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了，其次就是，后台管理这个东西，来来去去就是那么几个东西，查询，Form表单，Table表格，弹窗之类的一些东西，加上一个增删改查的一些逻辑

从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境，涵盖代码规范约束、提交信息规范约束、单元测试、自动部署等。

表单功能一直是前端项目中比不可少的一块功能，如果有个项目需要在两个月内开发200个左右表单，那我们应该怎么办？加班加点也是能搞出来的，那质量有保证么，这是我们就需要开发一个可以通过可视化交互设计表单的功能。下面和大家分享下我在开发这款表单设计器时使用的技术能力以及整个的设计思路…

关于可视化搭建，可以看这篇文章：页面可视化搭建工具前生今世。 面向开发者和普通用户，快速生成H5页面。有时候低代码比无代码更能提高生产力，脱离“复制粘贴”式的组件复用。对运营人员来说可以快速搭建一个营销页面，对开发来说可以方便的添加、组合组件，结合少量代码去复用之前组件。 大部…

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…