vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

 更新时间:2022年07月12日 11:40:25   作者:邹琼俊  
这篇文章主要介绍了使用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 右键菜单显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Ant Design Vue Pro动态路由加载,服务器重启首页白屏问题

    Ant Design Vue Pro动态路由加载,服务器重启首页白屏问题

    这篇文章主要介绍了Ant Design Vue Pro动态路由加载,服务器重启首页白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue侦测相关api的实现方法

    Vue侦测相关api的实现方法

    这篇文章主要介绍了Vue侦测相关api,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue3.0中的monorepo管理模式的实现

    Vue3.0中的monorepo管理模式的实现

    这篇文章主要介绍了Vue3.0中的monorepo管理模式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Ant design vue中的联动选择取消操作

    Ant design vue中的联动选择取消操作

    这篇文章主要介绍了Ant design vue中的联动选择取消操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码

    Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码

    本篇文章主要介绍了Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • javaScript与vue获取元素的方法代码示例

    javaScript与vue获取元素的方法代码示例

    在开发中我们可能会遇到这样的问题,文本框聚焦、元素点击等,所以下面这篇文章主要给大家介绍了关于javaScript与vue获取元素的相关资料,需要的朋友可以参考下
    2023-10-10
  • axios中cookie跨域及相关配置示例详解

    axios中cookie跨域及相关配置示例详解

    自从入了 Vue 之后,一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起看看吧。
    2017-12-12
  • vant-ui组件库中如何修改NavBar导航栏的样式

    vant-ui组件库中如何修改NavBar导航栏的样式

    这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 源码分析Vue3响应式核心之effect

    源码分析Vue3响应式核心之effect

    这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下
    2023-04-04
  • el-table实现嵌套表格的展示功能(完整代码)

    el-table实现嵌套表格的展示功能(完整代码)

    el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧
    2024-02-02

最新评论