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);
现在的运行效果如下:
此解决方案缺点:虽然能够解决现有问题,但是如果组件升级了,想要使用最新升级后的组件,还要再次修改代码。
到此这篇关于vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法的文章就介绍到这了,更多相关vue 右键菜单显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue项目实现减少app.js和vender.js的体积操作
这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Vue项目中使用better-scroll实现一个轮播图自动播放功能
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果。这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下2018-12-12
最新评论