快捷導航

vue3實現(xiàn)鼠標右鍵顯示菜單,點擊其他地方消失問題

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

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

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

在標簽上加上 @contextmenu=“contextmenu” 即可

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

顯示我們定義的菜單

去掉瀏覽器默認的菜單

通過 preventDefault api

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

定義一個菜單頁面

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

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

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

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

點擊其他地方菜單消失

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

在右鍵時設(shè)置焦點，那么當點擊其他地方時就會觸發(fā)失去焦點事件，在調(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();   //默認觸發(fā)事件的行為被 preventDefault() 取消了
  fixedBoxStyleObject.left = e.clientX + 'px'
  fixedBoxStyleObject.top = e.clientY + 'px'
  isShowMenu.value = true
  setTimeout(() => {
      fixedBoxRef.value.focus()
  },1)
}

tips：

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

css部分

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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