vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3鼠标右键显示菜单,点击其他地方消失

vue3实现鼠标右键显示菜单,点击其他地方消失问题

作者:一个无所事事的程序猿

这篇文章主要介绍了vue3实现鼠标右键显示菜单,点击其他地方消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3触发鼠标右键的回调函数

在标签上加上 @contextmenu=“contextmenu” 即可

<div @contextmenu="contextmenu" class="contextmenu"></div>

显示我们定义的菜单

去掉浏览器默认的菜单

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
}

点击其他地方菜单消失

一般我们用设置焦点和失去焦点触发事件来完成这个功能,例如:

在右键时设置焦点,那么当点击其他地方时就会触发失去焦点事件,在调用回调函数即可

  <div tabindex="-1" class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" @blur="isShowMenu = false" ref="fixedBoxRef">
    <span>删除聊天</span>
  </div>
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:

css部分

.fixed-box{
  position: fixed;
  color: black;
  padding: 8px;
  width: fit-content;
  background-color: #F8F8F8;
}
.contextmenu{
	width:300px;
	height:300px;
  margin: 100px auto;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文