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-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序
這篇文章主要介紹了利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題
這篇文章主要介紹了Vue如何動(dòng)態(tài)加載本地圖片的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue+elementUI用戶(hù)修改密碼的前端驗(yàn)證規(guī)則
用戶(hù)登錄后修改密碼,密碼需要一定的驗(yàn)證規(guī)則,這篇文章主要介紹了vue+elementUI用戶(hù)修改密碼的前端驗(yàn)證,需要的朋友可以參考下2024-03-03
在Vue和Django進(jìn)行前后分離開(kāi)發(fā)時(shí),經(jīng)常會(huì)遇到跨域和CSRF令牌驗(yàn)證問(wè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登錄攔截或者路由攔截的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue搭建后臺(tái)系統(tǒng)需要注意的問(wèn)題
這篇文章主要介紹了Vue搭建后臺(tái)系統(tǒng)需要做的幾點(diǎn)，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios處理后端返回的Excel文件流,并提供下載功能,文中通過(guò)代碼介紹的非常詳細(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)目中,通過(guò)結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的桑基圖,本文將通過(guò)完整的代碼示例,帶你一步步完成一個(gè)?；鶊D的實(shí)現(xiàn),需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09