记录一次多dom层级下使用VContextmenu的坑

先看需求

分组上右键弹出分组操作菜单
空白处右键弹出创建分组菜单

一开始代码结构

<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"
                        >

完成。
最终效果