Vue多个组件内使用右键菜单vue-contextmenu指向不正确问题

说明：自己写了个组件A，里面有用到vue-contextmenu右键菜单，右键获取鼠标对应的元素后进行删除，编辑等操作

使用：我在画面上重复使用了 组件A  3次

问题：使用第一个组件右键操作元素没问题ok，但是右键第二个，第三个...时获取到的元素都是第一个组件里的元素

原因：

因为我们自己已经写了组件A了，现在组件A里用的右键vue-contextmenu也是一个组件，

所以当我们不管右击第几个组件时，实际打开的右键菜单都是同一个

解决：

不用vue-contextmenu组件，自己写个右键菜单的功能，这样弹出的菜单不会存在重叠冲突的问题

vue-contextmenu组件方式

自定义右键菜单方式（不用导入vue-contextmenu插件）

 

 

自定义右键菜单代码示例

<!-- 组件元素：右键触发菜单事件 -->
<组件A @contextmenu.prevent="showMenu($event,item2)"></组件A>
<组件A @contextmenu.prevent="showMenu($event,item2)"></组件A>
<组件A @contextmenu.prevent="showMenu($event,item2)"></组件A>


<!-- 右键菜单 -->
<ul v-show="contextMenuVisible" :style="{left:contextMenu.x+'px',top:contextMenu.y+'px'}" class="contextmenu">
  <li @click="editStrip"><i class="el-icon-edit"></i>编辑条</li>
  <li @click="addStrip"><i class="el-icon-circle-plus-outline"></i>新增条</li>
  <li @click="delStrip"><i class="el-icon-search"></i>删除条</li>
</ul>

data() {
  return {
	contextMenuVisible: false,
	contextMenu: {
	  rightClickItemIndex: null,
	  rightClickItem: null,
	  x: null,
	  y: null,
	}
  }
},
methods: {
  showMenu(event, item) {
	this.contextMenuVisible = true;
	this.contextMenu.rightClickItem = item;
	var x = event.clientX;
	var y = event.clientY;
	this.contextMenu.x = x;
	this.contextMenu.y = y;
  },
  closeMenu(){
	this.contextMenuVisible = false;
  },
  editStrip() {
	//编辑事件
  },
  addStrip() {
	//增加事件
  },
  delStrip() {
	//删除事件
  }
},
watch: {
  contextMenuVisible(value) {
	if (value) {
	  document.body.addEventListener('click', this.closeMenu)
	} else {
	  document.body.removeEventListener('click', this.closeMenu)
	}
  }
}