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 右键菜单显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • .eslintrc配置目录及配置项的使用方式

    .eslintrc配置目录及配置项的使用方式

    这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue2 Watch监听操作方法

    Vue2 Watch监听操作方法

    这篇文章主要介绍了Vue2 Watch监听,通过watch监听器,我们可以实时监控数据的变化,并且在数据发生改变时进行相应的操作,需要的朋友可以参考下
    2023-12-12
  • vue祖孙组件之间的数据传递案例

    vue祖孙组件之间的数据传递案例

    这篇文章主要介绍了vue祖孙组件之间的数据传递案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • Vue表格首列相同数据合并实现方法

    Vue表格首列相同数据合并实现方法

    这篇文章主要介绍了Vue实现表格首列相同数据合并的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue项目实现减少app.js和vender.js的体积操作

    vue项目实现减少app.js和vender.js的体积操作

    这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue+elementUI下拉框自定义颜色选择器方式

    Vue+elementUI下拉框自定义颜色选择器方式

    这篇文章主要介绍了Vue+elementUI下拉框自定义颜色选择器方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    这篇文章主要为大家详细介绍了vue配置nprogress实现页面顶部进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue组件通信传值操作示例

    vue组件通信传值操作示例

    这篇文章主要介绍了vue组件通信传值操作,结合实例形式分析了vue.js父子组件通信及兄弟组件通信相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Vue项目中使用better-scroll实现一个轮播图自动播放功能

    Vue项目中使用better-scroll实现一个轮播图自动播放功能

    better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果。这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
    2018-12-12
  • 简单聊聊Vue中的计算属性和属性侦听

    简单聊聊Vue中的计算属性和属性侦听

    计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论