之前是采用npm或者yarn直接装包vue-contextmenujs的形式：

npm install vue-contextmenujs -S || yarn add vue-contextmenujs

　　而vue-contextmenujs在布局方面存在一些bug。

　　当右键点击记录时，完整展示应该是如下图所示：

结果，当点击靠前的记录时，顶部一部分记录被浏览器给遮挡了，如下图所示：

　　由于是使用的第三方开源组件，所以我直接将组件源码下载下来，然后修改组件源码，通过直接在源码中引入组件的形式调用。组件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);

　　现在的运行效果如下：

　　此解决方案缺点：虽然能够解决现有问题，但是如果组件升级了，想要使用最新升级后的组件，还要再次修改代码。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。