vue中自定义右键菜单

1. 在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：

2. 在页面编写右键菜单内容:

      
      
内容
    

3. 在data()中定义需要的变量属性

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

4. 观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法

  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }

5. 在method中定义打开右键菜单和关闭右键菜单的两个方法

    openMenu(e, item) {
      this.rightClickItem = item;

      let x = e.clientX;
      let y = e.clientY;

      this.top = y;
      this.left = x;
      
      this.visible = true;
    },
    closeMenu() {
      this.visible = false;
    }

6. 在style中写右键菜单的样式

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background-color: rgb(3, 125, 243);;
  color: white;
}

参考文档地址