beforeInit事件不生效，事件名的问题

magicxie commented 4 years ago

你遇到了什么 BUG beforeInit事件不生效

组件的 BUG https://cn.vuejs.org/v2/guide/components-custom-events.html

你是否查阅了 README 中的常见问题和其他 ISSUE 本地修改源码的事件名 https://github.com/HaoChuan9421/vue-ueditor-wrap/blob/master/src/components/vue-ueditor-wrap.vue#L124 emit('beforeInit') 为全小写 emit('beforeinit') 即修复

截图如果可能，提供截图

haochuan9421 commented 4 years ago

这样写不生效？你不要写成连字符的或者全小写的，不然肯定不生效呀

haochuan9421 commented 4 years ago

为什么要全小写？camelCase有什么不好吗？

magicxie commented 4 years ago

为什么要全小写？camelCase有什么不好吗？

引入 CDN 链接的方式，模板写在html的无编译版本能重现

可以看到在网页里写驼峰@beforeInit，但注册到实例的listener列表里，事件命名已经变成全小写了

haochuan9421 commented 4 years ago

@magicxie 好吧，确实是有问题，我修复一下，待会发一个版本，谢谢你的指出

magicxie commented 4 years ago

@magicxie 好吧，确实是有问题，我修复一下，待会发一个版本，谢谢你的指出

感谢🙏

haochuan9421 commented 4 years ago

@magicxie 已经修复了哈，改成了官方推荐的写法了：@before-init="doSomeThing"，这个 BUG 是由于 HTML 不区分大小写导致的，如果经过编译的话，驼峰的也是可以识别的，谢谢你的指出，你安装一下最新版本的就好了

haochuan9421 commented 4 years ago

贴一个会复现 BUG 的完整示例，后面如果有人看到会好理解一些。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-ueditor-wrap/lib/vue-ueditor-wrap.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{ message }}</div>
      <vue-ueditor-wrap
        v-model="msg"
        :config="myConfig"
        ref="editor"
        @beforeInit="beforeInit"
      ></vue-ueditor-wrap>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        components: {
          VueUeditorWrap,
        },
        mounted() {
          console.log(this.$refs.editor);
        },
        methods: {
          beforeInit(editorId) {
            console.log("beforeInit", editorId);
          },
        },
        data: {
          message: "Hello Vue!",
          msg: "Hello Editor!",
          myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 240,
            // 初始容器宽度
            initialFrameWidth: "100%",
            // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
            serverUrl: "http://35.201.165.105:8000/controller.php",
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            UEDITOR_HOME_URL: "/static/UEditor/",
          },
        },
      });
    </script>
  </body>
</html>

haochuan9421 / vue-ueditor-wrap

beforeInit事件不生效，事件名的问题 #120