vue3实现鼠标右键显示菜单,点击其他地方消失问题
作者:一个无所事事的程序猿
这篇文章主要介绍了vue3实现鼠标右键显示菜单,点击其他地方消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3触发鼠标右键的回调函数
在标签上加上 @contextmenu=“contextmenu” 即可
<div @contextmenu="contextmenu" class="contextmenu"></div>
显示我们定义的菜单
去掉浏览器默认的菜单
- 通过 preventDefault api
e.preventDefault(); //默认触发事件的行为被 preventDefault() 取消了
- 定义一个菜单页面
<div class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" > <span>删除聊天</span> </div>
这个页面绑定isShowMenu变量用来显示或不显示菜单,通过fixedBoxStyleObject变量来设置菜单的位置
- 定义触发的回调函数
const contextmenu = (e) => { e.preventDefault(); //默认触发事件的行为被 preventDefault() 取消了 fixedBoxStyleObject.left = e.clientX + 'px' fixedBoxStyleObject.top = e.clientY + 'px' isShowMenu.value = true }
点击其他地方菜单消失
一般我们用设置焦点和失去焦点触发事件来完成这个功能,例如:
在右键时设置焦点,那么当点击其他地方时就会触发失去焦点事件,在调用回调函数即可
- 优化template部分
<div tabindex="-1" class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" @blur="isShowMenu = false" ref="fixedBoxRef"> <span>删除聊天</span> </div>
- 优化scipt部分
const contextmenu = (e) => { e.preventDefault(); //默认触发事件的行为被 preventDefault() 取消了 fixedBoxStyleObject.left = e.clientX + 'px' fixedBoxStyleObject.top = e.clientY + 'px' isShowMenu.value = true setTimeout(() => { fixedBoxRef.value.focus() },1) }
tips:
- 由于div本身不能获取焦点,但设置tabindex后便可以获取焦点
- 设定一个定时器的原因是dom从不显示到显示需要时间,必须得显示后才能获取焦点
css部分
.fixed-box{ position: fixed; color: black; padding: 8px; width: fit-content; background-color: #F8F8F8; } .contextmenu{ width:300px; height:300px; margin: 100px auto; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。