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自定义指令右键弹出菜单的资料请关注脚本之家其它相关文章！
相关文章
很高兴Vue 2.5 Level E 发布了。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染2017-10-10
在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table示例一步步来实现这个需求,文中有详细的代码讲解,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue + Electron 制作桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了解决vue项目axios每次请求session不一致的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue如何加载本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现图片按比例缩放问题操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是echart的实现。对vue柱状进度条图像的实现方案，感兴趣的朋友跟随小编一起看看吧2019-08-08
这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包，所以只能使用CDN引入依赖，在vue项目的public/index.html文件里引入即可，本文通过示例代码给大家详细介绍，需要的朋友可以参考下2022-08-08
最新评论