vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法
之前是采用npm或者yarn直接裝包vue-contextmenujs的形式:
npm install vue-contextmenujs -S || yarn add vue-contextmenujs
當(dāng)右鍵點(diǎn)擊記錄時(shí),完整展示應(yīng)該是如下圖所示:
結(jié)果,當(dāng)點(diǎn)擊靠前的記錄時(shí),頂部一部分記錄被瀏覽器給遮擋了,如下圖所示:
由于是使用的第三方開源組件,所以我直接將組件源碼下載下來,然后修改組件源碼,通過直接在源碼中引入組件的形式調(diào)用。組件github倉庫地址:https://github.com/GitHub-Laziji/menujs。
下載組件源碼后,直接將src目錄下的所有文件,拷貝到我們自己項(xiàng)目中的組件文件夾下,我這里以src\components\global\vue-contextmenujs為例:
然后修改Submenu.vue中的代碼,下面紅色代碼部分是我修改之后的代碼:
mounted() { this.visible = true; for (let item of this.items) { if (item.icon) { this.hasIcon = true; break; } } /** * 修復(fù)超出溢出的問題 */ this.$nextTick(() => { const windowWidth = document.documentElement.clientWidth; const windowHeight = document.documentElement.clientHeight; const menu = this.$refs.menu; const menuWidth = menu.offsetWidth; const menuHeight = menu.offsetHeight; (this.openTrend === SUBMENU_OPEN_TREND_LEFT ? this.leftOpen : this.rightOpen)(windowWidth, windowHeight, menuWidth); this.style.top = this.position.y; if (this.position.y + menuHeight > windowHeight) { if (this.position.height === 0) { let diffVal = this.position.y + menuHeight - windowHeight; this.style.top = this.position.y - diffVal; if(this.position.y<windowHeight/2){//點(diǎn)擊的是上半屏 if(this.position.y>menuHeight){ this.style.top = this.position.y; } }else{//點(diǎn)擊的是下半屏 if(this.position.y>menuHeight){ this.style.top = this.position.y-menuHeight; } } } else { this.style.top = windowHeight - menuHeight; } } }); },
引入組件:
import Contextmenu from '@/components/global/vue-contextmenujs'; Vue.use(Contextmenu);
現(xiàn)在的運(yùn)行效果如下:
此解決方案缺點(diǎn):雖然能夠解決現(xiàn)有問題,但是如果組件升級了,想要使用最新升級后的組件,還要再次修改代碼。
到此這篇關(guān)于vue contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法的文章就介紹到這了,更多相關(guān)vue 右鍵菜單顯示不全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫 在移動(dòng)端利用這個(gè)庫 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果 也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下2018-12-12