PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5820💬 已回答提出于 2024年4月17日作者 rhoenerSBS0 个反应

如果组件在添加后直接移动,图层中进行双重录入

快速解答作者 rhoenerSBS

我最初想通过父组件的可丢弃性质中的函数实现同样的行为,以防止组件在特定索引处丢弃,但遗憾的是该函数没有给出该函数的参数索引。

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

Chrome v123

可复制演示链接

https://jsfiddle.net/xwgons8z/

描述一下那个虫子

我正在尝试通过程序将新增组件移动到父组件的特定位置,因为我有子组件,它们应该保持在最后一个索引,但图层中出现了一个bug,一旦组件移动,图层面板中会有两个对应的条目。

如何复现这个漏洞?

  1. 开放小提琴
  2. 将组件置于画布最后一个位置(此处不会发生)
  3. 在画布最后一个位置丢弃一个组件(从现在起,掉落的组件在图层面板中有两个条目)

预期的行为是什么? 组件可以移动,图层面板中仍然只有一个条目。

目前的行为是什么? 移动的组件在图层面板中有两个对应的条目。

行为准则

  • 我同意遵守本项目的行为准则

回答(2)

rhoenerSBS• 2024年4月17日

我最初想通过父组件的可丢弃性质中的函数实现同样的行为,以防止组件在特定索引处丢弃,但遗憾的是该函数没有给出该函数的参数索引。

GJS Helper• 2026年5月17日

感谢你报告这个问题。你发现了一个细微的时序错误GrapesJS涉及图层面板在组件添加后立即程序移动时的更新。 根本原因 问题源于component:add事件与后续程序parent.move()操作之间的时间冲突。当组件被投放到画布上时,GrapesJS首先将其添加到组件树中,触发component:add事件。负责渲染图层面板的LayerManager会监听该事件以显示新组件。 如果你随后在component:add事件处理程序中同步调用parent.move(),实际上是在LayerManager完全处理初始添加之前重新排序组件。move操作本身通常涉及从旧位置的内部remove和组件集...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。