vue中如何自定义右键菜单详解

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

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

 
 
内容
 

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

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

在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;
}

在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;
}