vue 自定義右鍵樣式的實(shí)例代碼

更新時(shí)間：2019年11月06日 14:18:56 作者：水君子

這篇文章主要介紹了vue 自定義右鍵樣式的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

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

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

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

@contextmenu.prevent

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

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

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

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

<!--template-->
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

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

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

參數(shù)名	注釋
x	x坐標(biāo)
y	y坐標(biāo)
showMenu	顯示狀態(tài)

組件使用

<template>
  <div class="modal_data_box">
    <ul>
      <li class="role_list" 
        v-for="(item,index) in role" 
        :key="index"
        @contextmenu.prevent="(e)=>{
          x_index = e.layerX;
          y_index = e.layerY;
          ctrlId = item.id;
          showMenu = true;
        }">
        <img :src="item.head_portrait" alt="">
        <p>{{item.name}}</p>
      </li>
    </ul>
	<!--組件-->
	<right-menu :x="x_index"
	      :y="y_index" 
	      :showMenu="showMenu"
	      @close="closeMenu"
	      @open="openDetail"
	      @del="delAttr"
	      @update="updateArr">
	</right-menu>
  </div>
</template>
<script>
  // 導(dǎo)入組件
	import rightMenu from '../module/right_menu.vue';
	export default{
		name:"roleModal",
		components:{rightMenu},
		data(){
			return {
				x_index:0,
				y_index:0,
				ctrlId:'',
				showMenu:false,
				role:[],
			}
		},
		methods:{
		  //關(guān)閉回調(diào) 
		  closeMenu(state){
		    console.log('關(guān)閉')
		    this.showMenu = state;
		  },
		  //打開詳情回調(diào) 			
		  openDetail(){
		    console.log('編輯')
		  },
		  //刪除回調(diào) 			
		  delAttr(){
		    console.log('刪除')
		  },
		  //編輯回調(diào) 			
		  updateArr(){
		    console.log('編輯')
		  },
		}
	}
</script>

修復(fù)漏洞

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

修復(fù)前：

//原來的代碼
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

修復(fù)后：

//修改后的代碼，（由于要判斷，所以單獨(dú)寫了個(gè)方法，把e跟item都傳過去）
<ul>
	<li class="role_list" 
		v-for="(item,index) in role" 
		:key="index"
		@contextmenu.prevent="(e)=>{
			rightClick(e,item)
		}">
		<img :src="item.head_portrait" alt="">
		<p>{{item.name}}</p>
	</li>
</ul>

//對(duì)應(yīng)的rightClick方法
rightClick(e,item){
	// 屏幕可見寬
	let clientWidth = document.body.clientWidth;
	// 菜單寬
	let menuWidth = 150;
	// 點(diǎn)擊右鍵時(shí)會(huì)返回對(duì)應(yīng)的clientX，用這個(gè)值與(clientWidth+菜單寬度)對(duì)比，如果大于的話，就把菜單左偏移一個(gè)菜單寬
	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 自定義右鍵樣式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: