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

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;
}