Vue自定义指令实现点击右键弹出菜单示例详解
更新时间：2023年01月11日 10:56:54 作者：xiaoxiaok
这篇文章主要为大家介绍了Vue自定义指令实现点击右键弹出菜单示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、实现思路
1.使用contextmenu事件
该需求需要拦截浏览器的右击事件，更改为自定义监听事件，可使用@contextmenu.prevent直接绑定一个监听函数，它的作用就是拦截右击事件并触发绑定的监听事件。
其次，为了在右击的位置打开菜单，我们需要获取鼠标点击的位置；一般来说，若绑定的函数没有自定义参数，则可以直接使用默认的参数e来获取；若绑定的函数具有自定义参数，则需要定义$event来获取位置，即
@contextmenu.prevent="rightclick(index, indexMeasure, $event)
最后，通过参数event可获取鼠标点击的横向X轴值和竖直Y轴值，然后使用固定定位来对菜单进行偏移，因为固定定位是相对于浏览器窗口，且获取的X和Y轴值也是相对于浏览器窗口的。
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
2.点击菜单之外的任意地方关闭菜单
在mounted里边监听全局的点击事件即可
mounted () {
// 鼠标点击其他位置时隐藏菜单
document.onclick = function () {
menu.style.display = 'none';
}
}
3.菜单置于图层的最顶层
该需求是为了避免在点击菜单项时，触发了其他元素绑定的监听函数。这其实跟图层有关，我们只需要将菜单置到顶层即可。使用的是z-index属性,如下
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
二、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Vue自定义指令实现右键菜单</title>
<script src="js/vue.js"></script>
<style>
/* 自定义右键菜单 */
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
#menu ul {
margin: 5px 0;
}
#menu li {
height: 30px;
line-height: 30px;
color: #21232E;
font-size: 12px;
text-align: center;
cursor: default;
list-style-type: none;
border-bottom: 1px dashed #cecece;
}
#menu li:hover {
background-color: #cccccc;
}
.block {
height: 300px;
width: 400px;
background-color: pink;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="itany">
<div style="position: relative;">
<div class="block" v-rightclick>1</div>
<div class="block" v-rightclick>2</div>
<div class="block" v-rightclick>3</div>
<div class="block" v-rightclick>4</div>
<div class="block" v-rightclick>5</div>
<div class="block" v-rightclick>6</div>
<!-- 自定义鼠标右键菜单 -->
<div id="menu">
<ul>
<li v-for="item in rightMenuList" @click="item.handler">
{{item.text}}
</li>
</ul>
</div>
</div>
</div>
<script>
Vue.directive('rightclick', function (el, binding) {
el.oncontextmenu = function (e) {
console.log('e.clientY', e.clientY)
// console.log('e.clientX', e.clientX)
e.preventDefault();
menu.style.display = 'block';
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
}
});
var vm = new Vue({
el: '#itany',
data: {
rightMenuList: [
{
id: 0,
text: "开通道",
handler: () => {
alert('通道开启成功');
}
},
{
id: 1,
text: "关通道",
handler: () => {
alert('通道关闭成功');
}
},
{
id: 2,
text: "重启通道",
handler: () => {
alert('通道重启成功');
}
},
]
},
methods: {
},
mounted () {
// 鼠标点击其他位置时隐藏菜单
document.onclick = function () {
menu.style.display = 'none';
}
}
});
</script>
</body>
</html>以上就是Vue自定义指令实现点击右键弹出菜单示例详解的详细内容，更多关于Vue自定义指令右键弹出菜单的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue3中的reactive函数声明数组方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要介绍了M1 pro芯片启动Vue项目的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue2.0 如何在hash模式下实现微信分享,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue组件之间相互传值的方式，对vue感兴趣的同学，可以参考下2021-05-05
vue3+ts import引入第三方js文件报错的2种解决方法
这篇文章主要给大家介绍了关于vue3+ts import引入第三方js文件报错的2种解决方法,在Vue中通常我们引入一个js插件都是使用npm方式下载然后import使用的,需要的朋友可以参考下2023-08-08
Vue3兼容大部分Vue2的特性，用Vue2代码开发Vue3都可以，性能上面打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%,本篇文章主要介绍Vue3的7种种组件通信,需要的朋友可以参考下面文章的具体内容2021-09-09
这篇文章主要介绍了react和vue的事件处理差异,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了如何使用Vite安装和启动Vue3项目,并推荐了一些常用的第三方库,如js-tool-big-box、less或sass预处理器、axios请求库以及Element Plus UI库,需要的朋友可以参考下2024-12-12
vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解
这篇文章主要介绍了vue如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI2024-07-07
,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论