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)
	}
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值