Vue 3项目集成wheelnav.js遇导入错误求助

你的问题核心在于依赖库导入方式错误和初始化时机不符合Vue组件生命周期，下面是具体修复方案：

一、先解决依赖引入问题 #

wheelnav依赖Raphael，这俩都是全局挂载的传统JS库，直接在组件内import无法让它们暴露全局变量。最简单的办法是把三个库直接引入项目入口HTML：
打开public/index.html，在<body>末尾添加：

<script src="./assets/raphael.min.js"></script>
<script src="./assets/raphael.icons.min.js"></script>
<script src="./assets/wheelnav.min.js"></script>

（注意路径要和你项目中assets文件夹的实际位置对应）

二、修正组件代码的核心问题 #

1. 把初始化逻辑移到Vue生命周期钩子：你之前在组件外部初始化，此时DOM还没渲染，根本找不到#piemenu元素，必须等组件挂载或菜单显示时再执行初始化。
2. 替换内联事件为Vue事件绑定：Vue开发中尽量不用原生内联事件，改用@mouseup绑定组件方法。
3. 避免重复初始化：加个标记确保菜单只初始化一次。

修改后的完整组件代码：

<template>
  <div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close">
    <div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-marker
         data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='270'
         data-wheelnav-cssmode>
      <!-- 用Vue事件绑定替换原生内联事件 -->
      <div data-wheelnav-navitemtext='0' @mouseup="handleItemClick(0)"></div>
      <div data-wheelnav-navitemtext='1' @mouseup="handleItemClick(1)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CmpContextMenu',
  props: {
    display: Boolean,
  },
  data() {
    return {
      left: 0,
      top: 0,
      show: false,
      menuInitialized: false, // 标记菜单是否已初始化
    };
  },
  computed: {
    style() {
      return {
        top: `${this.top}px`,
        left: `${this.left}px`,
      };
    },
  },
  methods: {
    close() {
      this.show = false;
      this.left = 0;
      this.top = 0;
      console.log('trigger false');
    },
    open(evt) {
      this.show = true;
      this.left = evt.pageX || evt.clientX;
      this.top = evt.pageY || evt.clientY;
      // 首次打开菜单时初始化
      if (!this.menuInitialized) {
        this.initPieMenu();
      }
    },
    initPieMenu() {
      // 此时DOM已渲染完成，可以获取到piemenu元素
      const piemenu = new wheelnav('piemenu');
      piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
      piemenu.createWheel();
      this.menuInitialized = true;
    },
    handleItemClick(itemIndex) {
      // 这里写对应菜单项的业务逻辑
      alert(`点击了菜单项${itemIndex}`);
    },
  },
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  z-index: 999;
  cursor: pointer;
}

#piemenu>svg {
  width: 100%;
  height: 100%;
}

#piemenu {
  height: 400px;
  width: 400px;
  margin: auto;
}

@media (max-width: 400px) {
  #piemenu {
    height: 300px;
    width: 300px;
  }
}

[class|=wheelnav-piemenu-slice-basic] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover] {
  fill: #497F4C;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
  fill: #333;
  stroke: none;
}

[class|=wheelnav-piemenu-title-selected] {
  fill: #fff;
  stroke: none;
}

[class|=wheelnav-piemenu-title-hover] {
  fill: #222;
  stroke: none;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title]>tspan {
  font-family: Impact, Charcoal, sans-serif;
  font-size: 24px;
}

.wheelnav-piemenu-marker {
  stroke: #444;
  stroke-width: 2;
}
</style>

关键修复点说明 #

• 改用全局script引入依赖库，确保wheelnav能访问到Raphael全局变量
• 把菜单初始化逻辑移到initPieMenu方法，在首次打开菜单时执行，避免DOM未渲染就初始化
• 用Vue的@mouseup替换原生内联事件，符合Vue开发规范
• 添加menuInitialized标记，防止重复初始化菜单

内容的提问来源于stack exchange，提问作者Keno Eduave