鼠标右键弹出菜单列表

后台多标签导航里，常见需求是鼠标右键弹出菜单，用来关闭当前、关闭其它、关闭所有标签。自己用 contextmenu 拿坐标、再绑点击关闭，第三步很容易和「点空白关菜单」抢事件。

项目里后来改用 vue-contextmenujs，把菜单的定位、点击、自动关闭交给库处理，冲突就少了。下面按安装、注册、绑定、参数四步记录。

效果如下：

一、实现思路

1. 在多标签导航区域点击鼠标右键，触发 contextmenu。
2. 取出坐标 x、y，在当前位置弹出自定义「关闭所有标签」菜单。
3. 点击菜单项触发关闭标签；点击其它区域关闭菜单。

前两步不难。第三步里关闭标签和关闭菜单容易事件冲突，用第三方右键菜单库可以避开。

二、安装与注册

安装

npm install vue-contextmenujs

yarn add vue-contextmenujs

在 main.js 引入

// main.js
import Contextmenu from 'vue-contextmenujs'
Vue.use(Contextmenu)

原文示例写成了 Vue.use(Contextmen)，少了一个字母，运行会报错。应按上面写成 Contextmenu。

三、绑定右键并弹出菜单

在标签容器上用 @contextmenu.prevent.stop 拦住浏览器默认菜单，并交给 delAllTag：

<div
    class="tag-wrap"
    :class="tagList.length > 0 ? 'tags-view-container' : ''"
    @contextmenu.prevent.stop="delAllTag($event)"
>

methods: {
    delAllTag(event) {
      this.$contextmenu({
        x: event.offsetX,
        y: event.offsetY,
        items: [
          {
            label: '关闭所有标签',
            divided: true,
            minWidth: 0,
            onClick: () => {
              this.$store.dispatch('deleteAlltag')
            }
          }
        ],
        event,
        customClass: 'mzss-cx', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 160 // 主菜单最小宽度
      })
      return false
    }
  }

prevent 阻止系统菜单，stop 避免冒泡。onClick 里再 dispatch 真正关标签，菜单开关和业务解耦。

四、参数说明与其它案例

库支持的菜单项、宽高、层级等参数如下：

其它菜单形态可以对照：

更多写法见 示例参考。

一句话总结：右键菜单把「弹出/关闭」交给专用库，业务只处理关标签；自己绑第三步时最容易和空白点击冲突。