1、先了解鼠标点击偏移的几个属性。

clientY 指的是距离可视页面左上角的距离，受页面滚动的影响。
pageY 指的是距离可视页面左上角的距离，不受页面滚动影响。
screenY 指的是距离电脑屏幕左上角的距离。
layerY 指的是距离元素的左上角距离，受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角，找到它或它父级元素中最近具有定位的左上角距离。
offsetY 指的是距离它自己左上角的距离，计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性。

2、举例

（1）页面代码

经过几次测试，使用layerY解决了页面鼠标右键菜单位置偏移的问题。

<template>
  <div class="app-container" @contextmenu.prevent="openMenu($event)" @scroll="handleScroll">
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="saveData">保存</li>
      <li @click="newData">新建</li>
      <li @click="open1">通知1</li>
      <li @click="open2">通知2</li>
    </ul>
<div>其它内容</div>
</div>
</template>

<script>

export default {
name:'',
data() {
return {
//右键菜单实现
      visible: false,
      top: 0,
      left: 0,
}
},
watch: {
//点击菜单栏后自动关闭
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
  },
methods: {
    /**菜单功能--开始*/
    openMenu(e) {
      this.left=e.layerX;//e.layerX为获取鼠标点击处的坐标，left为设置菜单栏到左侧的距离
      this.top=e.layerY;
      this.visible = true;
    },
//关闭菜单
    closeMenu() {
      this.visible = false
    },
//监听滚动条事件
    handleScroll() {
      this.closeMenu()
    },
    saveData() {
      this.$message({
        message: '假装保存成功测试',
        center: true,
      });
    },
    newData() {
      this.$message({
        message: '假装新建成功测试',
        type: 'success',
      });

    },
    open1() {
      const h = this.$createElement;

      this.$notify({
        title: '标题名称',
        message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
      });
    },

    open2() {
      this.$notify({
        title: '提示',
        message: '这是一条不会自动关闭的消息',
        duration: 0
      });
    },
 /**菜单功能--结束*/
}

}

</script>
<style lang="scss" scoped>
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  border:1px solid #1890ff;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 2px 2px;
  padding: 7px 16px;
  cursor: pointer;
  width: 200px;
}

.contextmenu li:hover {
  border-radius:8px;
  background-color:#e7efff;
  font-weight: bold;
}
</style>

（2）其中某些元素需要根据页面布局手动设置。例如

 openMenu(e) {
      this.left=e.layerX;//e.layerX为获取鼠标点击处的坐标，left为设置菜单栏到左侧的距离
      this.top=e.layerY;
      const tagName = e.target.tagName;//获取鼠标点击的标签名
      console.log(tagName);
      if(tagName==='FORM'){
        this.left=e.layerX;//e.layerX为获取鼠标点击处的坐标，left为设置菜单栏到左侧的距离
        this.top=e.layerY;
      }else{
        this.left=e.clientX-200;
        this.top=e.clientY-85;
      }

      this.visible = true;
    },