使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题

  • 使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

  之前是采用npm或者yarn直接装包vue-contextmenujs的形式:  当右键点击记录时,完整展示应该是如下图所示:

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

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

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

使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题

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

使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题

   由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用。组件github仓库地址:https://github.com/GitHub-Laziji/menujs。

下载组件源码后,直接将src目录下的所有文件,拷贝到我们自己项目中的组件文件夹下,我这里以srccomponentsglobalvue-contextmenujs为例:

使用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);

  现在的运行效果如下:

使用vue-contextmenujs鼠标右键菜单时,当高度不够时显示不全的问题

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