这篇文章主要介绍“vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”，在日常操作中，相信很多人在vue contextmenujs鼠标右键菜单高度不够显示不全如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
之前是采用npm或者yarn直接装包vue-contextmenujs的形式：
npm install vue-contextmenujs -S || yarn add vue-contextmenujs当右键点击记录时，完整展示应该是如下图所示：
结果，当点击靠前的记录时，顶部一部分记录被浏览器给遮挡了，如下图所示：
由于是使用的第三方开源组件，所以我直接将组件源码下载下来，然后修改组件源码，通过直接在源码中引入组件的形式调用。
下载组件源码后，直接将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);现在的运行效果如下：
此解决方案缺点：虽然能够解决现有问题，但是如果组件升级了，想要使用最新升级后的组件，还要再次修改代码。
到此，关于“vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
