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


v-for="item in resourceList"

:key="item.id"

@click="handleClickFolder(item)"

@contextmenu.prevent="openMenu($event,item)"

>





v-for="item in resourceList"

:key="item.id"

@click="handleClickFolder(item)"

@contextmenu.prevent="openMenu($event,item)"

>


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


  • 内容





  • 内容


在data()中定义需要的变量属性
data() {
return {
visible: false,
top: 0,
left: 0
}
}

data() {
return {
visible: false,
top: 0,
left: 0
}
}
观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法
watch: {
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
}

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


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


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

参考文档地址参考文档地址