快捷導(dǎo)航

vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題

更新時(shí)間：2024年04月26日 09:30:30 作者：一個(gè)無(wú)所事事的程序猿

這篇文章主要介紹了vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3觸發(fā)鼠標(biāo)右鍵的回調(diào)函數(shù)

在標(biāo)簽上加上 @contextmenu=“contextmenu” 即可

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

顯示我們定義的菜單

去掉瀏覽器默認(rèn)的菜單

通過(guò) preventDefault api

e.preventDefault();   //默認(rèn)觸發(fā)事件的行為被 preventDefault() 取消了

定義一個(gè)菜單頁(yè)面

  <div class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" >
    <span>刪除聊天</span>
  </div>

這個(gè)頁(yè)面綁定isShowMenu變量用來(lái)顯示或不顯示菜單，通過(guò)fixedBoxStyleObject變量來(lái)設(shè)置菜單的位置

定義觸發(fā)的回調(diào)函數(shù)

const contextmenu = (e) => {
  e.preventDefault();   //默認(rèn)觸發(fā)事件的行為被 preventDefault() 取消了
  fixedBoxStyleObject.left = e.clientX + 'px'
  fixedBoxStyleObject.top = e.clientY + 'px'
  isShowMenu.value = true
}

點(diǎn)擊其他地方菜單消失

一般我們用設(shè)置焦點(diǎn)和失去焦點(diǎn)觸發(fā)事件來(lái)完成這個(gè)功能，例如：

在右鍵時(shí)設(shè)置焦點(diǎn)，那么當(dāng)點(diǎn)擊其他地方時(shí)就會(huì)觸發(fā)失去焦點(diǎn)事件，在調(diào)用回調(diào)函數(shù)即可

優(yōu)化template部分

  <div tabindex="-1" class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" @blur="isShowMenu = false" ref="fixedBoxRef">
    <span>刪除聊天</span>
  </div>

優(yōu)化scipt部分

const contextmenu = (e) => {
  e.preventDefault();   //默認(rèn)觸發(fā)事件的行為被 preventDefault() 取消了
  fixedBoxStyleObject.left = e.clientX + 'px'
  fixedBoxStyleObject.top = e.clientY + 'px'
  isShowMenu.value = true
  setTimeout(() => {
      fixedBoxRef.value.focus()
  },1)
}

tips：

由于div本身不能獲取焦點(diǎn)，但設(shè)置tabindex后便可以獲取焦點(diǎn)
設(shè)定一個(gè)定時(shí)器的原因是dom從不顯示到顯示需要時(shí)間，必須得顯示后才能獲取焦點(diǎn)

css部分

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表)
這篇文章主要介紹了Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表) ,需要的朋友可以參考下
2017-05-05
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開發(fā)中,JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,易于人閱讀和編寫,同時(shí)也易于機(jī)器解析和生成,Vue.js作為一個(gè)流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細(xì)介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下
2024-10-10
Vue引用echarts超詳細(xì)步驟(附圖文)
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下
2023-08-08
Vue生命周期中的組件化你知道嗎
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
Vue登錄攔截登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作
這篇文章主要介紹了Vue登錄攔截登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue 3中toRaw和markRaw的使用教程
toRaw和markRaw是Vue 3中引入的新API,用于更精細(xì)地控制對(duì)象的代理和響應(yīng)性,它們提供了在需要時(shí)繞過(guò)代理或禁用響應(yīng)性的能力,有助于提高性能和更好地與第三方庫(kù)進(jìn)行集成,本文給大家介紹Vue 3中toRaw和markRaw的使用,感興趣的朋友一起看看吧
2023-10-10
IDEA安裝vue插件圖文詳解
這篇文章主要為大家詳細(xì)介紹了IDEA安裝vue插件圖文，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue移動(dòng)端設(shè)置全屏背景的項(xiàng)目實(shí)踐
本vue移動(dòng)端項(xiàng)目設(shè)置全屏背景,關(guān)鍵是要找對(duì)文件,然后添加background屬性即可,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08