用vue-contextmenujs进行右键菜单的操作

1.安装依赖

npm install vue-contextmenujs

2.引用在main.js中

import Contextmenu from "vue-contextmenujs"

Vue.use(Contextmenu);

3.使用示例 我是在elementui表格中使用的

<template>

....

<el-table

　　.....

        @row-contextmenu="onContextmenu">

　　<el-table-column

.......

</el-table>

</template>

<script>

....

methods:{

onContextmenu(row, column, event) { //配置右击菜单

      this.banRightClick()

      this.$contextmenu({

        items: [

          {

            icon: "el-icon-copy-document",

            label: "复制该行信息",

            onClick: () => {

              this.$copyText(JSON.stringify(row)).then(

                e=>{

                  this.$message({

                    type: 'success',

                    message: '已复制编号为 '+row.code+' 的信息'

                  })

                },

                e=>{

                  console.log('复制失败：', e);

                }

              )

              this.restoreRightClick()

            }

          }

        ],

        event,

        customClass: "resource-context-menu",

        zIndex: 999,

        minWidth: 100

      });

      return false;

    },

}

.....

　mounted(){

　　document.oncontextmenu = new Function("event.returnValue=false");

}

....

</script>

items是右键菜单选项的列表，你可以往里面添加自定义的菜单

@row-contextmenu是elementui中el-table的一个事件

 当右击某一行时触发

要注意的是，浏览器自带的右键事件会覆盖掉这个事件，会看不到，所以，需要document.oncontextmenu = new Function("event.returnValue=false");来禁用浏览器自带的鼠标右键菜单

参考 https://blog.csdn.net/weixin_40252368/article/details/123480196