忙碌了一晚上的“枫师傅”用上了新插件v-contextmenujs，这个插件就按照他的文档来就行
我的使用：
<!-- 这里是demo.vue，之所以选择html是为了代码高亮 -->
<el-table-column label="操作" width="100" align="center" header-align="center">
<template slot-scope="rows">
<div class="menu" @contextmenu.prevent="onContextmenu($event,rows.row.name)" :pid="rows.row.id" :pname="rows.row.name">
<p class="menu-text">操作 <i class="el-icon-d-arrow-right"></i></p>
</div>
</template>
</el-table-column>
<script>
export default {
methods: {
onContextmenu (event, id) {
event.preventDefault()
this.$contextmenu({
items: [
{
label: '详情',
children: [
{
label: '当前页打开'
},
{
label: '新窗口打开'
}
]
},
{
label: '更新',
onclick: async () => {
}
},
{
label: '删除',
onclick: async () => {
}
}
],
event,
// x: event.clientX,
// y: event.clientY,
customClass: 'class-a',
zIndex: 3,
minWidth: 100
})
return false
},
handleScroll () {
// 销毁菜单
this.$contextmenu.destroy()
}
},
mounted () {
document.addEventListener('DOMMouseScroll', () => {
this.handleScroll()
}, false)
}
}
笔记：
使用.stop可以阻止事件冒泡
例如：
<div class="common-box">
<div class="a" @contextmenu.prevent="onContextmenua($event,1)">
<div class="b" @contextmenu.prevent.stop="onContextmenub($event,2)"></div>
</div>
</div>
