Vue3 动态创建右键菜单

### Vue3 中实现动态生成右键菜单

在 Vue3 项目中实现动态创建右键菜单功能涉及监听鼠标事件并根据特定条件渲染上下文菜单。通过组合 `ref` 和模板引用，可以有效地管理 DOM 元素的状态。

#### 创建基础结构

定义一个用于存储当前选中的目标元素及其位置的对象：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const showMenu = ref(false);
    const menuPosition = ref({ x: 0, y: 0 });
    
    function handleContextMenu(event) {
      event.preventDefault();
      
      // 更新菜单的位置和可见性状态
      menuPosition.value.x = event.clientX;
      menuPosition.value.y = event.clientY;
      showMenu.value = true;

      window.addEventListener('click', hideMenu);

      function hideMenu() {
        showMenu.value = false;
        window.removeEventListener('click', hideMenu);  
      }
    }

    return {
      showMenu,
      menuPosition,
      handleContextMenu
    };
  },
};

此部分逻辑负责处理用户的右击操作，并调整菜单的显示位置[^2]。

#### 渲染菜单组件

接下来，在模板里加入如下代码片段以展示实际效果：

<div @contextmenu="handleContextMenu">
  <!-- 主页面内容 -->
</div>

<!-- 上下文菜单 -->
<transition name="fade">
  <ul v-if="showMenu" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px`}" class="custom-menu">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
  </ul>
</transition>

上述 HTML 片段展示了如何利用 CSS 定位技术配合 JavaScript 来定位自定义菜单；同时应用了过渡动画使用户体验更加流畅。

#### 动态加载项

如果希望支持更复杂的场景比如基于不同节点提供不同的菜单条目，则可以在调用 `handleContextMenu()` 方法时传递额外参数来区分触发源，并据此构建相应的子项列表。

例如修改后的函数签名可能变为 `function handleContextMenu(event, nodeType)` ，其中 `nodeType` 参数用来指示被点击对象所属类别，进而决定呈现哪些具体的操作命令给用户选择[^1]。

对于 Electron 应用程序而言，还可以进一步探索原生系统的集成方式，如使用 `electron-context-menu` 插件简化开发流程[^3]。