准备

引入依赖

npm i vue-contextmenu

main.js 注册组件

import VueContextMenu from "vue-contextmenu";
Vue.use(VueContextMenu)

实现

指定右键目标

<div class="chatinfo" @contextmenu="showMenu()"></div>

指定右键对象

<vue-context-menu
  class="vue-context-menu"
  :contextMenuData="contextMenuData"
  @onOpen="onOpen"
>
</vue-context-menu>

配置右键对象

contextMenuData: {
    menuName: "context",
    //菜单显示的位置
    axis: {
      x: null,
      y: null
    },
    //菜单选项
    menulists: [
      {
        fnHandler: "onOpen",
        icoName: "el-icon-folder-opened",
        btnName: "点我"
      },
    ]
  },

指定事件与回调

    showMenu() {//小贴士:这里可以通过参数把需要的对象传递进来进行处理
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      this.contextMenuData.axis = {
        x,
        y
      };
    },

    onOpen() {
      //如果有需要可以-使用全局变量或者操作dom
      console.log('被点击');
    },