时间戳

首页 > 解决方案 > VueJs Laravel设置中的GrapeJs包，图标onclick事件未触发

javascript - VueJs Laravel设置中的GrapeJs包，图标onclick事件未触发

问题描述

这可能是在 Laravel 中为 Vuejs 编译 js 的方式，但这就是问题所在。

我有像这样使用的 GrapesJs javascript 包

    <template>
  <div class="base">
    <div id="gjs">
      <h1>Hello World Component!</h1>
    </div>
    <!-- <div id="blocks"></div> -->
  </div>
</template>

<script>
import grapesjs from "grapesjs";
import greapejspreset from "grapesjs-preset-webpage";
export default {
  data() {
    return {
      editor: null,
    };
  },

  mounted() {
    this.editor = grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: "#gjs",
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      fromElement: true,
      // Size of the editor
      height: "1000px",
      width: "auto",
      // Disable the storage manager for the moment
      storageManager: false,
      // Avoid any default panel
      cssIcons: null,
      plugins: [
        // 'gjs-blocks-basic',


           greapejspreset,
          ],
   this.editor.command("open-blocks");
    });
  },
};
</script>

如果我在 vue 文件之外有相同的示例，则单击图标有效，但在这种情况下，当我单击下面的任何图标时，它不会触发任何内容，就像这些事件被 vuejs 阻止一样

在此处输入图像描述

请帮忙！！！

标签： javascriptlaravelvue.jsgrapesjs

解决方案

好吧，在挖掘了超过 24 小时后，我终于能够修复它。

任何对 GrapeJs 有任何此类问题的人请仔细检查您是否不是 Font Awesome js 和 css，因为如果您这样做，您的 span 将被 svgs 替换，并且 onclick 正在寻找 span。

另一个可能的问题是你的字体真棒用svgs替换span

我之所以知道这一点，是因为我看到 svgs 和 span 隐藏在我的检查元素中

推荐阅读