vue?contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法
更新時間：2022年07月12日 11:40:25 作者：鄒瓊俊
這篇文章主要介紹了使用vue-contextmenujs鼠標右鍵菜單時，當高度不夠時顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，需要的朋友可以參考下
之前是采用npm或者yarn直接裝包vue-contextmenujs的形式：
npm install vue-contextmenujs -S || yarn add vue-contextmenujs
當右鍵點擊記錄時，完整展示應該是如下圖所示：
結果，當點擊靠前的記錄時，頂部一部分記錄被瀏覽器給遮擋了，如下圖所示：
由于是使用的第三方開源組件，所以我直接將組件源碼下載下來，然后修改組件源碼，通過直接在源碼中引入組件的形式調(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;
}
}
/**
* 修復超出溢出的問題
*/
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)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼。
到此這篇關于vue contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法的文章就介紹到這了,更多相關vue 右鍵菜單顯示不全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
Ant Design Vue Pro動態(tài)路由加載,服務器重啟首頁白屏問題
這篇文章主要介紹了Ant Design Vue Pro動態(tài)路由加載,服務器重啟首頁白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue偵測相關api，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-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
在開發(fā)中我們可能會遇到這樣的問題,文本框聚焦、元素點擊等,所以下面這篇文章主要給大家介紹了關于javaScript與vue獲取元素的相關資料,需要的朋友可以參考下2023-10-10
自從入了 Vue 之后，一直在用 axios 這個庫來做一些異步請求。下面這篇文章主要給大家介紹了關于axios中cookie跨域及相關配置的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導航欄的樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue3響應式核心之effect的相關知識，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，需要的可以參考一下2023-04-04
el-table實現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個el-table,這樣數(shù)據(jù)格式就沒問題了,主要就是樣式,將共同的列放到一列中,通過渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來,本文給大家分享el-table實現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02