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)
        }
      },
    ]
  })
},