Vue自定义元素身上的右键事件问题
作者：酷酷的橙007
这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在制作网页时，我们经常需要自定义右键事件，实现我们想要的功能，这里我手写了一个基于Vue的鼠标右键自定义事件，与大家共同分享。
template内容
在自己想要改变鼠标右键事件的dom中（这里以div#demo为例）加入一个ul，模拟鼠标右键后的弹框。
prevent属性可以消除右键默认事件。
<template>
<div>
<div id="demo" @contextmenu.prevent="openMenu($event)">
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" style="background:red;position:fixed">
<li>历史记录1</li>
<li>历史记录2</li>
<li>历史记录3</li>
<li>历史记录4</li>
</ul>
</div>
</div>
</template>
model层
跟踪鼠标点击位置控制ul所在的位置，同时在自己的dom上右键点击ul显示，点击body后ul隐藏
export default {
data() {
return {
visible: false,
top: 0,
left: 0
}
},
methods: {
openMenu(e) {
console.log(e.clientX);
console.log(e.clientY);
this.left = e.clientX
this.top = e.clientY
this.visible = true
},
closeMenu() {
this.visible = false
}
},
watch: {
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
}
}
style问题
这块比较简略，就是给div随便给点样式，这块根据需要改成自己右键点击dom的样式
#demo {
width: 50px;
height: 50px;
background: pink;
}
注：
- 可以在li元素上添加点击后的事件。
- ul不一定需要写在dom内，写在dom里面方便我们查看该ul属于哪个dom上的事件，因为ul已经脱离文本流，相对鼠标位置定位。fixed相对浏览器可视区移动。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。