太阳集团tyc5997|官网【中国】有限公司

这篇文章主要给大家介绍了关于vue添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、写原生方法

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

v-for="item in resourceList"
:key="item.id"
@click="handleClickFolder(item)"
@contextmenu.prevent="openMenu($event,item)"
>
...

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;

var x = e.pageX;
var y = e.pageY;

this.top = y;
this.left = x;

this.visible = true;
},
closeMenu() {
this.visible = false;
}

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

.contextmenu {
margin: 0;
background:唐山网站制作 #fff;
z-index: 3000;
position: absolute;
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: #eee;
}

参考链接

二、使用插件vue-context-menu

demo地址

github地址

安装：

npm install vue-contextmenu --save

引用：

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

使用：