最近用python寫(xiě)了個(gè)小說(shuō)程序的api,想著用 vue
做個(gè)系統(tǒng)管理數(shù)據(jù),腦子里出現(xiàn)的是這個(gè)畫(huà)面:
成都創(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ù),滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的沙坡頭網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
但是這種樣式的管理后臺(tái)已經(jīng)做了太多了,已經(jīng)審美疲勞,后面又想了一種類(lèi)操作系統(tǒng)的UI界面:
主要是靠 雙擊
和 右鍵
來(lái)操作,可操作多個(gè)模態(tài)框,跟操作 windows
類(lèi)似,接下來(lái)在里面拆出一個(gè)功能塊來(lái)寫(xiě)一篇文章,就是 自定義系統(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) |
組件使用
<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; }, //打開(kāi)詳情回調(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ù)前:
//原來(lái)的代碼 <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ú)寫(xiě)了個(gè)方法,把e跟item都傳過(guò)去) <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){ // 屏幕可見(jiàn)寬 let clientWidth = document.body.clientWidth; // 菜單寬 let menuWidth = 150; // 點(diǎn)擊右鍵時(shí)會(huì)返回對(duì)應(yīng)的clientX,用這個(gè)值與(clientWidth+菜單寬度)對(duì)比,如果大于的話(huà),就把菜單左偏移一個(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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
分享題目:vue自定義右鍵樣式的實(shí)例代碼
當(dāng)前URL:http://bm7419.com/article48/ipochp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、商城網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)