vue原生方法自定義右鍵菜單
本文實(shí)例為大家分享了vue原生方法自定義右鍵菜單的具體代碼,供大家參考,具體內(nèi)容如下
1.在需要添加右鍵的頁面,綁定contextmenu事件(阻止瀏覽器默認(rèn)事件,添加自定義事件)
<div @contextmenu.prevent.native="openMenu($event)"> ? .... </div>
2.在頁面編寫右鍵菜單的內(nèi)容
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> ? ? ? ? <li @click="test">添加節(jié)點(diǎn)</li> ? ? ? ? ?<li @click="test">添加節(jié)點(diǎn)</li> </ul>
3.在data()中定義需要的變量屬性
data() { ? ? return { ? ? ? visible: false, ? ? ? top: 0, ? ? ? left: 0 ? ? } ? }
4.創(chuàng)建監(jiān)聽事件,來觸發(fā)關(guān)閉右鍵菜單的方法
watch: { ? ? visible(value) { ? ? ? if (value) { ? ? ? ? document.body.addEventListener('click', this.closeMenu) ? ? ? } else { ? ? ? ? document.body.removeEventListener('click', this.closeMenu) ? ? ? } ? ? } ? },
5.打開和關(guān)閉右鍵菜單的兩個(gè)方法
//start openMenu(e) { ? var x = e.pageX; ? var y = e.pageY; ? this.top = y; ? this.left = x; ? this.visible = true;//在這里控制右鍵菜單的打開 }, //close closeMenu() { ? this.visible = false; },
6.樣式
.contextmenu { ? margin: 0; ? background: #fff; ? z-index: 3000; ? position: absolute; ? list-style-type: none; ? padding: 5px 0; ? border-radius: 4px; ? font-size: 12px; ? font-weight: 400; ? color: #333; ? box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); } .contextmenu li { ? margin: 0; ? padding: 7px 16px; ? cursor: pointer; } .contextmenu li:hover { ? background: #eee; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程
自定義指令是對(duì)普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的相關(guān)資料,需要的朋友可以參考下2023-02-02vue使用Proxy實(shí)現(xiàn)雙向綁定的方法示例
這篇文章主要介紹了vue使用Proxy實(shí)現(xiàn)雙向綁定的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03Vue將props值實(shí)時(shí)傳遞 并可修改的操作
這篇文章主要介紹了Vue將props值實(shí)時(shí)傳遞 并可修改的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的可以參考一下2023-06-06npm ERR! code 128的錯(cuò)誤問題解決方法
這篇文章主要介紹了解決npm ERR! code 128的錯(cuò)誤問題,本文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02