vue contextmenujs鼠标右键菜单高度不够显示不全如何解决
导读:本文共1562.5字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 之前是采用npm或者yarn直接装包vue-contextmenujs的形式:npminstallvue-contextmenujs-S||yarnaddvue-contextmenujs 当右键点击记录时,完整展示应该是如下图所示:结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示: 由于是使用的第三方开源组件,所以我直接将组件源码下... ...
目录
(为您整理了一些要点),点击可以直达。之前是采用npm或者yarn直接装包vue-contextmenujs的形式:
npminstallvue-contextmenujs-S||yarnaddvue-contextmenujs
当右键点击记录时,完整展示应该是如下图所示:
结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示:
由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用。
下载组件源码后,直接将src目录下的所有文件,拷贝到我们自己项目中的组件文件夹下,我这里以src\components\global\vue-contextmenujs为例:
然后修改Submenu.vue中的代码,下面红色代码部分是我修改之后的代码:
mounted(){this.visible=true;for(letitemofthis.items){if(item.icon){this.hasIcon=true;break;}}/***修复超出溢出的问题*/this.$nextTick(()=>{constwindowWidth=document.documentElement.clientWidth;constwindowHeight=document.documentElement.clientHeight;constmenu=this.$refs.menu;constmenuWidth=menu.offsetWidth;constmenuHeight=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){letdiffVal=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;}}});},
引入组件:
importContextmenufrom'@/components/global/vue-contextmenujs';Vue.use(Contextmenu);
现在的运行效果如下:
此解决方案缺点:虽然能够解决现有问题,但是如果组件升级了,想要使用最新升级后的组件,还要再次修改代码。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
vue contextmenujs鼠标右键菜单高度不够显示不全如何解决的详细内容,希望对您有所帮助,信息来源于网络。