vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法
作者：邹琼俊
这篇文章主要介绍了使用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 右键菜单显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！