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