這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時(shí)，當(dāng)高度不夠時(shí)顯示不全的問(wèn)題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問(wèn)題，但是如果組件升級(jí)了，想要使用最新升級(jí)后的組件，還要再次修改代碼，需要的朋友可以參考下

　　之前是采用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í)，頂部一部分記錄被瀏覽器給遮擋了，如下圖所示：

　　由于是使用的第三方開(kāi)源組件，所以我直接將組件源碼下載下來(lái)，然后修改組件源碼，通過(guò)直接在源碼中引入組件的形式調(diào)用。組件github倉(cāng)庫(kù)地址：https://github.com/GitHub-Laziji/menujs。

下載組件源碼后，直接將src目錄下的所有文件，拷貝到我們自己項(xiàng)目中的組件文件夾下，我這里以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ù)超出溢出的問(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)：雖然能夠解決現(xiàn)有問(wèn)題，但是如果組件升級(jí)了，想要使用最新升級(jí)后的組件，還要再次修改代碼。

到此這篇關(guān)于vue contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)vue 右鍵菜單顯示不全內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: