快捷導(dǎo)航

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

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

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

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

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

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

顯示我們定義的菜單

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

通過 preventDefault api

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

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

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

這個(gè)頁面綁定isShowMenu變量用來顯示或不顯示菜單，通過fixedBoxStyleObject變量來設(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ā)事件來完成這個(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-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序
這篇文章主要介紹了利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
解決Vue動(dòng)態(tài)加載本地圖片問題
這篇文章主要介紹了Vue如何動(dòng)態(tài)加載本地圖片的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗(yàn)證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗(yàn)證,需要的朋友可以參考下
2024-03-03
VUE django 跨域、csrf令牌的問題
在Vue和Django進(jìn)行前后分離開發(fā)時(shí),經(jīng)常會(huì)遇到跨域和CSRF令牌驗(yàn)證問題,本文詳細(xì)介紹了如何在Django后端設(shè)置視圖獲取CSRF令牌,并在Vue前端進(jìn)行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請(qǐng)求封裝的具體方法
2024-09-09
vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法
這篇文章主要介紹了vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue搭建后臺(tái)系統(tǒng)需要注意的問題
這篇文章主要介紹了Vue搭建后臺(tái)系統(tǒng)需要做的幾點(diǎn)，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Vue.js中前端如何處理從后端返回的Excel文件流詳解
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2025-01-01
vue作用域插槽詳解、slot、v-slot、slot-scope
這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue3使用ECharts實(shí)現(xiàn)?；鶊D的代碼示例
桑基圖是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動(dòng),在前端項(xiàng)目中,通過結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的?；鶊D,本文將通過完整的代碼示例,帶你一步步完成一個(gè)桑基圖的實(shí)現(xiàn),需要的朋友可以參考下
2025-01-01
詳解vue3中如何使用shaka-player
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09