Vue实现右键菜单，当页面滚动后，菜单错位的问题

当要实现右键菜单时候，需要@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的后面减去了功能按钮的头部内容，加上了滚动的元素高度，不然会发生错位：

 当点击右键的时候：