Vue3 右键菜单实现方案（基于 vue3-context-menu）

需求：在列表项（如导航 / 树节点）上右键点击时，弹出包含「删除」选项的右键菜单。

安装依赖

npm install --save @imengyu/vue3-context-menu

组件引入

import ContextMenu from '@imengyu/vue3-context-menu'; import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';

右击事件

右击菜单

// 右键点击事件处理 handleRightClickNav(e,item){ let that = this // 阻止浏览器默认右键菜单 e.preventDefault(); console.log(e) ContextMenu.showContextMenu({ x: e.clientX, y: e.clientY, items: [ { label: '删除', onClick: () => { that.deleteNav(item) } }, ] }) },