vue自定义右键菜单

需求描述

右键点击图片，弹出菜单列表，禁用浏览器自带的右键菜单弹窗。

功能实现

1.html模块

// 在需要添加右键的模块，绑定contextmenu事件（阻止浏览器默认事件，添加自定义事件）
<div @contextmenu.prevent.native="openMenu($event)">
  ....
</div>

// 右键菜单列表弹窗
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu  default-scrollbar">
   <li @click="addContext">添加节点</li>
   <li @click="addContext">添加节点</li>
</ul>

2.js模块

export default {
  name: "Index",
  data() {
    return {
      visible: false,// 右键菜单栏是否显示
      top: 0,// 右键菜单栏的y值
      left: 0,// 右键菜单栏的x值
    }
  },
  watch: {
  	// 创建监听事件，来触发关闭右键菜单的方法
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
  },
  methods: {
  	// 右键打开菜单
    openMenu(e) {
      var x = e.pageX;
      var y = e.pageY;
      this.top = y;// 菜单的坐标值y
      this.left = x;// 菜单的坐标值x
      this.visible = true;// 打开右键菜单列表弹窗
      ...
      // 调用接口，获取菜单列表的List，进行展示在菜单列表中，此处不再展示
    },
    // 关闭菜单
    closeMenu() {
      this.visible = false;
    },
    // 添加节点
    addContext() {
    },
  },
}