先看需求
分组上右键弹出分组操作菜单
空白处右键弹出创建分组菜单
一开始代码结构
<div
style="padding-bottom: 100px"
v-contextmenu:newGroupContextmenu
>
<el-collapse>
<el-collapse-item
v-contextmenu:groupContextmenu
:name="item.group_id" v-for="item,index in friends" :key="item.group_id"
>
父级div代码块绑定newGroupContextmenu,子级el-collapse-item绑定groupContextmenu
最后效果在子级右键只会显示父级的右键菜单
应该是父级拦截了事件,遂在子级添加事件阻止@contextmenu.prevent.native.stop
<div
style="padding-bottom: 100px"
v-contextmenu:newGroupContextmenu
>
<el-collapse>
<el-collapse-item
v-contextmenu:groupContextmenu
@contextmenu.prevent.native.stop
:name="item.group_id" v-for="item,index in friends" :key="item.group_id"
>
完成。
最终效果