<ul id="4cmys"></ul>

關于如何解決vue contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題

3403771864 發布于2022-10-23 14:54 / 554人閱讀

　　相信很多人以前都是采用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);

　　現在的運行效果如下：

　　此解決方案缺點：這個方案可以解決現在問題，但有一個bug,就是后面要組件升級時，就需要再次修改代碼。

云服務器 GPU云服務器關于webview顯示問題鼠標右鍵屏蔽鼠標右鍵 php鼠標右鍵

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128198.html

handsontable初步認知

摘要：待更新左上角單元格賦值問題，通過改源碼實現。下拉單元格高度修改，定位元素修改時下拉列表的最后一個顯示不全，有。 hansontable簡介是一個在線類似Excel的表格編輯器,支持豐富的展現和交互,有多樣的單元格類型供配置。核心是由原生JavaScript構建,充分模塊化,支持自定義build。除了核心表格渲染(實質就是js操作table,計算元素位置,自定義綁定事件處理),大部...

mrcode 2019-08-20 14:13 評論0 收藏0
handsontable初步認知

摘要：待更新左上角單元格賦值問題，通過改源碼實現。下拉單元格高度修改，定位元素修改時下拉列表的最后一個顯示不全，有。 hansontable簡介是一個在線類似Excel的表格編輯器,支持豐富的展現和交互,有多樣的單元格類型供配置。核心是由原生JavaScript構建,充分模塊化,支持自定義build。除了核心表格渲染(實質就是js操作table,計算元素位置,自定義綁定事件處理),大部...

wslongchen 2019-08-01 16:16 評論0 收藏0
原生js練習題---第五課

摘要：那該如何是好原題給出思路是讓事件負責標記按鍵就好了，而方向鍵的事件處理使用設個周期比較小的定時器持續監聽，由于周期小，長按時就會立刻執行相應的事件處理，效果更加流暢。閃爍實現效果閃爍簡單的一個定時器應用，用或都可以實現。 0x1模擬select控件實現效果：5-01模擬select控件比較簡單的點擊事件處理，也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事...

winterdawn 2019-08-19 18:11 評論0 收藏0
黑馬前端v7（含Vue3.0小兔鮮兒電商項目）完整代碼下載

摘要：沒有過時，它仍然是前端基礎的一部分。但無論如何，同時掌握和才是合格的前端同學。。前端綜合協議跨域通信安全問題瀏覽器渲染機制異步和單線程頁面性能優化防抖動和節流閥前端錯誤監控虛擬等。另外，前端常見的有兩個和。是的標準，是的超集。 2021已完結??Download：百度網盤??提取碼：k4H5?前端技術知識匯總：1、HTML...

senntyou 2021-11-22 15:29 評論0 收藏0