最近用python寫了個小說程序的api，想著用 vue 做個系統(tǒng)管理數(shù)據(jù)，腦子里出現(xiàn)的是這個畫面：

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的沙坡頭網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

但是這種樣式的管理后臺已經(jīng)做了太多了，已經(jīng)審美疲勞，后面又想了一種類操作系統(tǒng)的UI界面:

主要是靠 雙擊 和 右鍵 來操作，可操作多個模態(tài)框，跟操作 windows 類似，接下來在里面拆出一個功能塊來寫一篇文章，就是 自定義系統(tǒng)默認(rèn)的右鍵 。

自定義右鍵操作有五個步驟： 阻止 默認(rèn)右鍵。 獲取當(dāng)前右鍵點(diǎn)擊時的 x / y 坐標(biāo)，及 id 。 自定義右鍵菜單樣式及內(nèi)容，定位在指定的位置后顯示。 返回對應(yīng)點(diǎn)擊目錄的事件如: 查看 、 刪除 、 編輯 。 在任何地方點(diǎn)擊左鍵時 隱藏右鍵菜單 。 關(guān)鍵方法：

@contextmenu.prevent

這個是vue內(nèi)置的，點(diǎn)擊右鍵（阻止默認(rèn)右鍵的默認(rèn)行為）的一個回調(diào)方法，他返回了一大串東西這里我用到的是這兩個(用于定位顯示菜單的x,y位置)

x_index ， y_index 是儲存在 data 中的，用于定位模態(tài)框位置。

ctrlId 用于給接口處理的依據(jù)

showMenu 用于判斷是否顯示右鍵菜單

  

	  
	  
{{item.name}}
	

需要的參數(shù)(x,y,id)都具備了，因?yàn)橛益I操作很多地方都用到了，所以封裝成了一個組件

right_menu.vue 組件代碼 參數(shù)名 注釋 x x坐標(biāo) y y坐標(biāo) showMenu 顯示狀態(tài)

組件使用

修復(fù)漏洞

d[o_0]b同學(xué)發(fā)現(xiàn)了一個漏洞，就是當(dāng)鼠標(biāo)在屏幕右邊點(diǎn)擊時，菜單會被遮擋住，這邊做了一些調(diào)整。

修復(fù)前：

//原來的代碼

  

	  
	  
{{item.name}}
	

修復(fù)后：

//修改后的代碼，（由于要判斷，所以單獨(dú)寫了個方法，把e跟item都傳過去）

	

		
		
{{item.name}}
	


//對應(yīng)的rightClick方法
rightClick(e,item){
	// 屏幕可見寬
	let clientWidth = document.body.clientWidth;
	// 菜單寬
	let menuWidth = 150;
	// 點(diǎn)擊右鍵時會返回對應(yīng)的clientX，用這個值與(clientWidth+菜單寬度)對比，如果大于的話，就把菜單左偏移一個菜單寬
	let clickClientX = e.clientX + menuWidth
	if(clickClientX > clientWidth){
		console.log("菜單超出視線范圍")
		this.x_index = e.layerX - menuWidth;
	}else{
		this.x_index = e.layerX;
	}
	this.y_index = e.layerY;
	this.ctrlId = item.id;
	this.showMenu = true;
},

總結(jié)

以上所述是小編給大家介紹的vue 自定義右鍵樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！