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
當右鍵點擊記錄時，完整展示應該是如下圖所示：
結果，當點擊靠前的記錄時，頂部一部分記錄被瀏覽器給遮擋了，如下圖所示：
由于是使用的第三方開源組件，所以我直接將組件源碼下載下來，然后修改組件源碼，通過直接在源碼中引入組件的形式調用。組件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 右鍵菜單顯示不全內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了.eslintrc配置目錄及配置項的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進行相應的操作,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
Vue表格首列相同數(shù)據(jù)合并實現(xiàn)方法
這篇文章主要介紹了Vue實現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細介紹了vue配置nprogress實現(xiàn)頁面頂部進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue組件通信傳值操作,結合實例形式分析了vue.js父子組件通信及兄弟組件通信相關操作技巧,需要的朋友可以參考下2019-01-01
Vue項目中使用better-scroll實現(xiàn)一個輪播圖自動播放功能
better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現(xiàn)一個非常類似原生ScrollView的效果 也可以實現(xiàn)一個輪播圖的效果。這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)一個輪播圖,需要的朋友可以參考下2018-12-12
計算屬性用于處理復雜的業(yè)務邏輯,vue提供了檢測數(shù)據(jù)變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關于Vue中計算屬性和屬性偵聽的相關資料,需要的朋友可以參考下2021-10-10