使用vue-contextmenujs滑鼠右鍵選單時，當高度不夠時顯示不全的問題-有解無憂

　　之前是采用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);

　　現在的運行效果如下：

　　此解決方案缺點：雖然能夠解決現有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，

博客地址：	http://www.cnblogs.com/jiekzou/
博客著作權：	本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接，如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟，如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起討論，共同進步！再次感謝您耐心的讀完本篇文章，
其它：	.net-QQ群4：612347965 java-QQ群：805741535 H5-QQ群：773766020 我的拙作《ASP.NET MVC企業級實戰》《H5+移動應用實戰開發》《Vue.js 2.x實踐指南》《JavaScript實用教程》《Node+MongoDB+React 專案實戰開發》已經出版，希望大家多多支持！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498900.html

標籤：其他

上一篇：資料型別

下一篇：sass變數的詳細使用