问题 #3345💬 已回答提出于 2021年3月17日作者 joshk1320 个反应

面板和按钮部分，入门时无法使用 Vue.js

快速解答作者 uchoaaa

看看这个问题，可能会有帮助：https://github.com/artf/grapesjs/issues/275

问题

我正在努力让 grapejs Vue.js工作，但没有成功，我跟着入门程序操作，但还是没能正常工作。到目前为止，我已经把它添加到了 mounted() 部分，并且已经设置了一些带方块的按钮，可以显示并添加，但 [面板和按钮部分]（https://grapesjs.com/docs/getting-started.html#panels-buttons）一直没成功。问题总结：使用Vue.js我无法让面板和按钮部分从开始时显示出来。下面我附上了我目前主要想添加的App.vue文件——概念验证会稍后移到合适的位置。

回答（4）

uchoaaa• 2021年3月20日

看看这个问题，可能会有帮助：https://github.com/artf/grapesjs/issues/275

artf• 2021年3月23日

你好@joshk132说代码看起来不错，你能做一个可复现的演示吗（比如Codesandbox之类的软件）？

joshk132• 2021年3月26日

@artf我已经让面板显示的位置正常工作了，但现在显示不正常了。我不得不做的解决方案是改用下面的代码。基本上我必须把“editor”作为变量，但我在最初的代码里已经去掉了，因为 vue linter 会抱怨。附上了一张图片链接，展示了下面代码的效果，我不太确定具体是什么原因导致了样式问题。 https://imgur.com/GuFqv0o

GJSBlock• 2026年5月17日

谢谢你举报，@joshk132。关于“面板和按钮”部分关于不使用Vue.js不兼容的“面板和按钮部分的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：* 听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：”事件进行细致跟踪构建一个插件，扩展编辑器并具备此功能正式宣布：如果此功能能惠及更多用户，考...

在 GitHub 上查看完整讨论 →