vue-context-menu-实现鼠标右键事件

第一步：安装vue-context-menu

npm install vue-contextmenu --save

第二步：在main.js中引用

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

第三步：给需要点击的元素绑定事件

<div @contextmenu.native="contextmenu" >右键点击我弹出菜单</div>

这是点击过后显示的菜单

<vue-context-menu
      :contextMenuData="contextMenuData"<!--菜单绑定的-->
      @delRight="delRight"
      @delLeft="delLeft"
      @delOhter="delOhter"
      @closeAll="closeAll"
    ></vue-context-menu>

第四步：用事件做功能

 contextmenu(e) {//右键单击事件
      e.preventDefault();
      var x = e.clientX;
      var y = e.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      };
    },

第五步：菜单数据初始化，事件调用

data：{
contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "delRight", // Binding events(绑定事件)
            icoName: "fa fa-home fa-fw", // icon (icon图标 )
            btnName: "关闭右侧" // The name of the menu option (菜单名称)
          },
          {
            fnHandler: "delLeft",
            icoName: "fa fa-home fa-fw",
            btnName: "关闭左侧"
          },
          {
            fnHandler: "delOhter",
            icoName: "fa fa-home fa-fw",
            btnName: "关闭其他"
          },
          {
            fnHandler: "closeAll",
            icoName: "fa fa-home fa-fw",
            btnName: "关闭全部"
          }
        ]
      }
}

methods：{
delRight() {
      //关闭右侧
     alert('关闭右侧')
    },
    delLeft() {
      //关闭左侧
     alert('关闭左侧')
    },
    closeAll() {
      //关闭所有
     alert('关闭所有')
    },
    delOhter() {
      //关闭其他
     alert('关闭其他')
    }```
}