Vue自定義元素身上的右鍵事件問題
更新時間：2023年10月20日 16:53:16 作者：酷酷的橙007
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在制作網(wǎng)頁時，我們經(jīng)常需要自定義右鍵事件，實現(xiàn)我們想要的功能，這里我手寫了一個基于Vue的鼠標右鍵自定義事件，與大家共同分享。
template內(nèi)容
在自己想要改變鼠標右鍵事件的dom中（這里以div#demo為例）加入一個ul，模擬鼠標右鍵后的彈框。
prevent屬性可以消除右鍵默認事件。
<template>
<div>
<div id="demo" @contextmenu.prevent="openMenu($event)">
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" style="background:red;position:fixed">
<li>歷史記錄1</li>
<li>歷史記錄2</li>
<li>歷史記錄3</li>
<li>歷史記錄4</li>
</ul>
</div>
</div>
</template>
model層
跟蹤鼠標點擊位置控制ul所在的位置，同時在自己的dom上右鍵點擊ul顯示，點擊body后ul隱藏
export default {
data() {
return {
visible: false,
top: 0,
left: 0
}
},
methods: {
openMenu(e) {
console.log(e.clientX);
console.log(e.clientY);
this.left = e.clientX
this.top = e.clientY
this.visible = true
},
closeMenu() {
this.visible = false
}
},
watch: {
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
}
}
style問題
這塊比較簡略，就是給div隨便給點樣式，這塊根據(jù)需要改成自己右鍵點擊dom的樣式
#demo {
width: 50px;
height: 50px;
background: pink;
}
注：
- 可以在li元素上添加點擊后的事件。
- ul不一定需要寫在dom內(nèi)，寫在dom里面方便我們查看該ul屬于哪個dom上的事件，因為ul已經(jīng)脫離文本流，相對鼠標位置定位。fixed相對瀏覽器可視區(qū)移動。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
文章介紹了前端通過將后端返回的文件流轉(zhuǎn)化為blob對象,并使用FileReader實現(xiàn)文件下載的完整方式,文章詳細描述了前端Vue代碼和后端Spring Boot代碼,指出了后端使用不同變量下載文件時文件格式和名稱的問題2025-12-12
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結構，感興趣的朋友跟隨腳本之家小編一起學習吧2018-04-04
這篇文章主要介紹了vue 動態(tài)修改a標簽的樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue下使用fullcalendar及簡單案例,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
Vue項目npm run dev啟動失敗的6個常見原因(附解決方案)
Vue 項目啟動是前端開發(fā)的基礎操作,但很多新手（甚至有經(jīng)驗的開發(fā)者）都會遇到npm run dev（或?npm run serve）啟動失敗的問題,下面就來介紹一下失敗的原因及解決方案,感興趣的可以了解一下2026-01-01
這篇文章主要為大家詳細介紹了vue-cli之router基本使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue中的v-for循環(huán)key屬性注意事項小結,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
文章主要介紹了在Vue3項目中如何取消重復請求,以節(jié)省資源、保證數(shù)據(jù)正確性和提升用戶體驗,文章詳細講解了兩種實現(xiàn)方式：使用Axios的CancelToken和AbortController,需要的朋友可以參考下2026-02-02