建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

前篇 上一讲 - 低代码 - 可视化拖拽技术分析（2） 中，我们实现了画布元素拖拽移动时的辅助线和吸附功能；本节我们围绕以下几个场景，实现场景操作后的 撤销 与 重做。 向画布中拖拽加入物料组件； 对

前言 上一讲 - 低代码 - 可视化拖拽技术分析（1） 中，我们实现了编辑器画布的拖拽移动基础操作，接先来从使用体验角度，完善一下画布编辑区的拖动，包含以下两个方向： 为拖动的 block 显示辅助线

页面在编辑时，如何监听浏览器返回，给出二次弹框确认？在很多场景下，误触浏览器会导致页面返回，从而丢失已经修改或者添加的数据，今天通过三种方案给大家展开讲解。

多组件联动是前端大屏很重要的一个元素，可以借此实现后台表格、文档库、导航栏等传统前端项目才有的功能，我又是如何实现的呢？

接上一篇文章 引言 在现代前端开发中，组件化是提升开发效率的核心手段之一。然而，当多个组件需要协同工作时，如何实现高效的联动逻辑成为开发者面临的关键挑战。本文将以一个基于 Vue3 的组件联动功能为例

前言 因为之前公司内部业务及提效的需要，做了一系列低代码的项目：分别有vscode插件、figma设计稿转代码插件、脚手架，拖拽生成h5营销页面和问卷等。现在把这一些系列实践的经验自我总结一下，形成一

企业和开发者们都在寻求更高效、便捷的方式来创建各类页面，无论是H5页面、PC页面还是TV页面。腾讯推出的tmagic - editor页面可视化编辑器，为我们带来了一种全新的解决方案，并且已经开源，这