vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法
之前是采用npm或者yarn直接裝包vue-contextmenujs的形式:
npm install vue-contextmenujs -S || yarn add vue-contextmenujs
當(dāng)右鍵點擊記錄時,完整展示應(yīng)該是如下圖所示:

結(jié)果,當(dāng)點擊靠前的記錄時,頂部一部分記錄被瀏覽器給遮擋了,如下圖所示:

由于是使用的第三方開源組件,所以我直接將組件源碼下載下來,然后修改組件源碼,通過直接在源碼中引入組件的形式調(diào)用。組件github倉庫地址:https://github.com/GitHub-Laziji/menujs。
下載組件源碼后,直接將src目錄下的所有文件,拷貝到我們自己項目中的組件文件夾下,我這里以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){//點擊的是上半屏
if(this.position.y>menuHeight){
this.style.top = this.position.y;
}
}else{//點擊的是下半屏
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)在的運行效果如下:

此解決方案缺點:雖然能夠解決現(xiàn)有問題,但是如果組件升級了,想要使用最新升級后的組件,還要再次修改代碼。
到此這篇關(guān)于vue contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法的文章就介紹到這了,更多相關(guān)vue 右鍵菜單顯示不全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Ant Design Vue Pro動態(tài)路由加載,服務(wù)器重啟首頁白屏問題
這篇文章主要介紹了Ant Design Vue Pro動態(tài)路由加載,服務(wù)器重啟首頁白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Ant design vue中的聯(lián)動選擇取消操作
這篇文章主要介紹了Ant design vue中的聯(lián)動選擇取消操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue+Jwt+SpringBoot+Ldap完成登錄認證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認證的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
el-table實現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個el-table,這樣數(shù)據(jù)格式就沒問題了,主要就是樣式,將共同的列放到一列中,通過渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來,本文給大家分享el-table實現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02

