1.禁用默认右击事件
document.oncontextmenu = function (e) {
return false
}
2.自定义菜单(v-if控制显示)
<div id="menu" style="width : 100px; top: -200px; background-color: #004454; border : 1px solid #07caa9; padding : 2px; position : absolute;" v-if="visibleMenu === true">
<div class="hoverMenu" style="color: #07caa9; padding: 5px; font-weight: bold;" @click="nextNode">
<span>下钻</span>
</div>
<div class="hoverMenu" style="color: #07caa9; padding: 5px; font-weight: bold;" @click="count">
<span>图算法</span>
</div>
</div>
.hoverMenu {
opacity: 0.85;
}
.hoverMenu:hover {
opacity: 1;
color: #fff !important;
background-color: #07caa9;
}
3.添加事件
const that = this
// XXX为范围
XXX.on('contextmenu', function (params) {
that.visibleMenu = true // 需先显示后面才能获取到dom
const evt = window.event || arguments[0] // 获取当前鼠标点击的位置
const container = document.getElementById('app') // 获取视窗
var rightEdge = container.clientWidth - evt.clientX
var bottomEdge = container.clientHeight - evt.clientY
setTimeout(function () {
const menu = document.getElementById('menu') // 获取自定义菜单
// 边界控制
if (rightEdge < menu.offsetWidth) {
menu.style.left = container.clientWidth - menu.offsetWidth + 'px'
} else {
menu.style.left = container.scrollLeft + evt.clientX + 'px'
}
if (bottomEdge < menu.offsetHeight) {
menu.style.top = container.clientHeight - menu.offsetHeight + 'px'
} else {
menu.style.top = document.documentElement.scrollTop + container.scrollTop + evt.clientY + 'px'
}
},50)
// 再次点击关闭菜单框
that.graph.on('mousedown', function (params) {
that.visibleMenu = false
})
}
})