VUE项目中使用【vue-contextmenujs】自定义右键菜单

1、安装 vue-contextmenujs

npm install vue-contextmenujs

2、在main.js文件中引入

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

3、在 .vue文件中使用

<div 
	v-for="item in defaultList" 
	:key="item.devId" 
	@contextmenu.prevent="(event) => {onContextmenu(event, item)}">
    <p>{
   
   {item.name}}</p>
</div>

/** 鼠标右键 */
onContextmenu(event, data) {
    
    
  this.$contextmenu({
    
    
    items: [
      {
    
    
        icon: "el-icon-edit",
        label: "修改板卡IP",
        onClick: () => {
    
    
          this.handleEdit(data);
        }
      },
    ],
    event,
    customClass: "class-a",
    zIndex: 3,
    minWidth: 100
  });
  return false;
},
handleEdit() {
    
    
	console.log(data);
}