vue-contextmenu右键点击菜单栏

1.阻止浏览器默认事件  @contextmenu.prevent="show($event)"

 <div @contextmenu.prevent="show($event)" style="position: relative;">
                  <el-radio-button v-for="item in functionData" :key="item.code" :label="item.code" class="funSelectList">
                    {{ item.name }}
                  </el-radio-button>
                </div>

2.下载包 npm install vue-contextmenu --save

3.在mian.js里面引入

import VueContextMenu from 'vue-contextmenu'
//右键点击菜单
Vue.use(VueContextMenu)
Vue.use(ElementUI)

 4.使用插件  <vue-context-menu></vue-context-menu>

 <vue-context-menu id="menu" v-if="menu" style="    width: 112px;
                                        background: rgba(30, 44, 78, 0.89);
                                        display: block;
                                        color: rgb(126, 70, 200);
                                        height: 46px;
                                        border-radius: 7px;
                                        position: absolute;
                                        text-align: center;"
                :style="{ left: contextMenuData.axis.x + 'px', top: contextMenuData.axis.y + 'px' }"
                :contextMenuData="contextMenuData" @deletedata="deletedata" @addFn="addFn">
              </vue-context-menu>

在我使用这个插件的的时候，出现了问题，一个是刷新完之后 第一次点击出现的右侧菜单栏 位置是不正确，二是跟随滚动 。所以用了动态style +绝对定位（有需要的可以参考）

5.自定义菜单

  data () {
    return {
      menu: false,
      contextMenuData: {
        menuName: "demo",
        //菜单显示的位置
        axis: {
          x: null,
          y: null
        },
        //菜单选项
        menulists: [
          {
            fnHandler: "deletedata", //事件
            btnName: "删除",
          },
          {
            fnHandler: "addFn",
            btnName: "增加",
          },
        ],

      },
}}

6.事件操作 （大部分的示例中都没有传点击参数，注意！！， let y = e.clientY - 99;是我根据自己的数据进行了调整，需注意 ）

    show (e) {
      this.menu = true
      let x = e.clientX;
      let y = e.clientY - 99;
      // Get the current location
      this.contextMenuData.axis = { x, y };
 

    },
    deletedata () {
      console.log("delete!");
      this.$message({ type: "info", message: "删除数据" });
    },
    addFn () {
      console.log("add!");
      this.$message({ type: "info", message: "增加数据" });
    },

如图