資訊專欄INFORMATION COLUMN
相信很多人以前都是采用npm或者yarn直接裝包vue-contextmenujs的形式：
npm install vue-contextmenujs -S || yarn add vue-contextmenujs
當(dāng)右鍵點擊記錄時，完整展示應(yīng)該是如下圖所示：
結(jié)果，當(dāng)點擊靠前的記錄時，就看到下圖所示，上面一部分內(nèi)被遮擋：
這里有一個問題，就是由于是使用的第三方開源組件，因此需要直接將組件源碼下載下來，然后修改組件源碼，這樣通過直接在源碼中引入組件的形式調(diào)用。組件github倉庫地址：https://github.com/GitHub-Laziji/menujs。
這樣當(dāng)下載組件源碼后，直接將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)在問題，但有一個bug,就是后面要組件升級時，就需要再次修改代碼。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/128198.html
摘要：待更新左上角單元格賦值問題，通過改源碼實現(xiàn)。下拉單元格高度修改，定位元素修改時下拉列表的最后一個顯示不全，有。 hansontable簡介 是一個在線類似Excel的表格編輯器,支持豐富的展現(xiàn)和交互,有多樣的單元格類型供配置。 核心是由原生JavaScript構(gòu)建,充分模塊化,支持自定義build。 除了核心表格渲染(實質(zhì)就是js操作table,計算元素位置,自定義綁定事件處理),大部...
摘要：待更新左上角單元格賦值問題，通過改源碼實現(xiàn)。下拉單元格高度修改，定位元素修改時下拉列表的最后一個顯示不全，有。 hansontable簡介 是一個在線類似Excel的表格編輯器,支持豐富的展現(xiàn)和交互,有多樣的單元格類型供配置。 核心是由原生JavaScript構(gòu)建,充分模塊化,支持自定義build。 除了核心表格渲染(實質(zhì)就是js操作table,計算元素位置,自定義綁定事件處理),大部...
摘要：那該如何是好原題給出思路是讓事件負(fù)責(zé)標(biāo)記按鍵就好了，而方向鍵的事件處理使用設(shè)個周期比較小的定時器持續(xù)監(jiān)聽，由于周期小，長按時就會立刻執(zhí)行相應(yīng)的事件處理，效果更加流暢。閃爍實現(xiàn)效果閃爍簡單的一個定時器應(yīng)用，用或都可以實現(xiàn)。 0x1模擬select控件 實現(xiàn)效果：5-01模擬select控件 比較簡單的點擊事件處理，也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事...
摘要：沒有過時，它仍然是前端基礎(chǔ)的一部分。但無論如何，同時掌握和才是合格的前端同學(xué)。。前端綜合協(xié)議跨域通信安全問題瀏覽器渲染機制異步和單線程頁面性能優(yōu)化防抖動和節(jié)流閥前端錯誤監(jiān)控虛擬等。另外，前端常見的有兩個和。是的標(biāo)準(zhǔn)，是的超集。 2021已完結(jié)??Download：百度網(wǎng)盤??提取碼：k4H5?前端技術(shù)知識匯總：1、HTML...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
