vue原生方法自定義右鍵菜單
更新時間：2022年04月10日 08:13:49 作者：weixin_51751522
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(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)閉右鍵菜單的兩個方法
//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;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用canvas實(shí)現(xiàn)移動端手寫簽名
這篇文章主要為大家詳細(xì)介紹了基于vue使用canvas實(shí)現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決)
這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報錯問題(一般都能解決),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場景中，有一定的用處2021-06-06
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁面空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了手把手帶你封裝一個vue component第三方庫，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
spring-cloud-stream的手動消息確認(rèn)問題
這篇文章主要介紹了spring-cloud-stream的手動消息確認(rèn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue報錯:Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報錯:Injection?"xxxx"?not?found的解決辦法,文中通過圖文將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue?表格單選按鈕的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08