当要实现右键菜单时候,需要@contextmenu事件配合使用,这个时候就要实时获取鼠标的点击坐标,然后将菜单的div元素显示在这个坐标位置,当页面位置没有滚动的时候,使用e.pageY或者e.clinetY就可以获取到鼠标右键事件获得的坐标位置。
定义一个坐标:
const position = ref({
top: 0,
left: 0,
})
绑定右键事件:
当又右键点击事件的时候:给这个坐标重新赋值
因为我这里页面滚动的元素是main-box的div,不是body,所以就获取到这个main-box,然后获取滚动高度:
const openMenu = (e: MouseEvent, item: any) => {
dirShowMenu.value = false
// 如果文件是上传状态,则直接返回
if (item.uploading) {
return
}
// 获取侧边菜单栏宽度和顶部栏高度
const sideBarWidth = (
document.querySelector('.el-menu-vertical') as HTMLDivElement
).offsetWidth
const headerHeight = (
document.querySelector('.tools-box') as HTMLDivElement
).offsetTop
const scroTop = (document.querySelector('div.main-box') as HTMLDivElement).scrollTop
console.log('打开菜单', e, headerHeight, scroTop)
showMenu.value = true
position.value.top = e.pageY - headerHeight - 36 + scroTop
position.value.left = e.clientX - sideBarWidth + 2
rightClickItem.value = item
// 显示文件提示内容
item.showTips = false
}
我这里在e.pageY的后面减去了功能按钮的头部内容,加上了滚动的元素高度,不然会发生错位:
当点击右键的时候: