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

￡神魔★判官ぃ 2023-10-13 11:49 15阅读 0赞

当要实现右键菜单时候，需要@contextmenu事件配合使用，这个时候就要实时获取鼠标的点击坐标，然后将菜单的div元素显示在这个坐标位置，当页面位置没有滚动的时候，使用e.pageY或者e.clinetY就可以获取到鼠标右键事件获得的坐标位置。

定义一个坐标：

const position = ref({
      top: 0,
      left: 0,
    })

绑定右键事件：

![954f3e317f67488098cf281c3cd94a23.png][]

当又右键点击事件的时候：给这个坐标重新赋值![1c7b5583ccad4c278696fda1a9a8dba5.png][]

因为我这里页面滚动的元素是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的后面减去了功能按钮的头部内容，加上了滚动的元素高度，不然会发生错位：![63bffa2d6ad349f6816fd5fa0511abf6.png][]

当点击右键的时候：![fb304563367c4298aa3acba89e607142.png][]

[954f3e317f67488098cf281c3cd94a23.png]: https://img-blog.csdnimg.cn/954f3e317f67488098cf281c3cd94a23.png
[1c7b5583ccad4c278696fda1a9a8dba5.png]: https://img-blog.csdnimg.cn/1c7b5583ccad4c278696fda1a9a8dba5.png
[63bffa2d6ad349f6816fd5fa0511abf6.png]: https://img-blog.csdnimg.cn/63bffa2d6ad349f6816fd5fa0511abf6.png
[fb304563367c4298aa3acba89e607142.png]: https://img-blog.csdnimg.cn/fb304563367c4298aa3acba89e607142.png