vue鼠标右键自定义菜单_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)

}

}

}