Vue3中使用vue-panZoom组件遇到TypeError: Cannot read properties of undefined (reading 'on')错误求助

问题说明 #

在Vue3项目中实现vue-panZoom功能时，出现错误：TypeError: Cannot read properties of undefined (reading 'on')。已查阅官方仓库的Issue #43，但其中的解决方案无法解决当前问题，现求助排查是否遗漏了关键配置步骤。

已执行的操作及代码 #

1. 安装依赖 #

npm install vue-panzoom --save

2. 全局注册组件（Main.js） #

import { createApp } from "vue";
import App from "./App.vue";
import panZoom from 'vue-panzoom'

const app = createApp(App);
app.use(panZoom);
app.mount("#app");

3. 页面使用组件（AppZoom.vue） #

<panZoom selector=".zoomable">
  <div class="zoomable">
    <img src="../../../assets/images/abcdemo.jpg" />
  </div>
</panZoom>

错误情况 #

运行代码后触发上述错误，核心问题为调用on方法时对象未定义，推测是panZoom实例初始化或挂载环节出现异常。

内容的提问来源于stack exchange，提问作者Ramlal S