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

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

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

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

在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

}

.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

}

html： 在需要右击的div上，加上 @contextmenu.prevent 方法就行

方法：

html: 在需要右击的div上，加上 @dblclick 方法就行

一、首先，在编辑器中创建一个web项目，并在目录中创建一个新的静态页面buttonclick.html：

二、然后在title标签中介绍准备好的vue.js库文件。在这里，将JS文件放在JS目录中，然后在body标记中插入一个div和四个按钮，将click事件与Vue中的v-on标记绑定：

三、接下来，插入脚本标记，在标记中写入事件函数，在事件中传递参数，然后打开浏览器查看结果：

四、打开浏览器并单击其中一个按钮以打开窗口返回的元素对象。以上是如何使用Vue获取click事件元素：

---