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

标签：vue 菜单 contextmenujs 右键 event row

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

标签：vue,菜单,contextmenujs,右键,event,row
From： https://www.cnblogs.com/luzanzan/p/17531470.html