返回顶部
首页 > 资讯 > 精选 >vue contextmenujs鼠标右键菜单高度不够显示不全如何解决
  • 443
分享到

vue contextmenujs鼠标右键菜单高度不够显示不全如何解决

2023-07-02 16:07:54 443人浏览 泡泡鱼
摘要

这篇文章主要介绍“Vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”,在日常操作中,相信很多人在vue contextmenujs鼠标右键菜单高度不够显示不全如何解决问题上存在疑惑,小编查阅了各式资

这篇文章主要介绍“Vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”,在日常操作中,相信很多人在vue contextmenujs鼠标右键菜单高度不够显示不全如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

  之前是采用npm或者yarn直接装包vue-contextmenujs的形式:

npm install vue-contextmenujs -S || yarn add vue-contextmenujs

  当右键点击记录时,完整展示应该是如下图所示:

vue contextmenujs鼠标右键菜单高度不够显示不全如何解决

结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示:

vue contextmenujs鼠标右键菜单高度不够显示不全如何解决

  由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用。

下载组件源码后,直接将src目录下的所有文件,拷贝到我们自己项目中的组件文件夹下,我这里以src\components\global\vue-contextmenujs为例:

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 contextmenujs鼠标右键菜单高度不够显示不全如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: vue contextmenujs鼠标右键菜单高度不够显示不全如何解决

本文链接: https://lsjlt.com/news/343316.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue contextmenujs鼠标右键菜单高度不够显示不全如何解决
    这篇文章主要介绍“vue contextmenujs鼠标右键菜单高度不够显示不全如何解决”,在日常操作中,相信很多人在vue contextmenujs鼠标右键菜单高度不够显示不全如何解决问题上存在疑惑,小编查阅了各式资...
    99+
    2023-07-02
  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法
      之前是采用npm或者yarn直接装包vue-contextmenujs的形式: npm install vue-contextmenujs -S || yarn add vue-...
    99+
    2024-04-02
  • windows11鼠标右键不显示刷新如何解决
    本篇内容介绍了“windows11鼠标右键不显示刷新如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!windows11鼠标右键不显示刷...
    99+
    2023-07-01
  • win11鼠标右键打不开如何解决
    本文小编为大家详细介绍“win11鼠标右键打不开如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“win11鼠标右键打不开如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。解决方法首先通过开始菜单打开系...
    99+
    2023-07-01
  • win7鼠标右键无法弹出菜单如何解决
    如果在Windows 7上右键无法弹出菜单,可能是由于以下几个原因:1. 鼠标驱动问题:首先尝试更新鼠标驱动程序。可以在设备管理器中...
    99+
    2023-09-04
    win7
  • win10鼠标右键无法弹出菜单如何解决
    今天小编给大家分享一下win10鼠标右键无法弹出菜单如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。win10鼠标右键...
    99+
    2023-06-30
  • win10下右键弹出菜单栏文本信息不显示怎么解决
    如果Windows 10下右键弹出菜单栏的文本信息不显示,可以尝试以下解决方法: 重新启动Windows Explorer进程:...
    99+
    2024-02-29
    win10
  • win10右键显示设置打不开如何解决
    本篇内容主要讲解“win10右键显示设置打不开如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“win10右键显示设置打不开如何解决”吧!按下【Win】+【R】组合键打开运行,然后输入【Po...
    99+
    2023-07-02
  • win10右键个性化和显示设置打不开如何解决
    这篇文章主要介绍“win10右键个性化和显示设置打不开如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“win10右键个性化和显示设置打不开如何解决”文章能帮助大家解决问题。首先在联网的状态下,...
    99+
    2023-07-01
  • R语言横坐标的标签显示不全如何解决
    如果R语言横坐标的标签显示不全,可以考虑采取以下几种方法解决:1. 调整图像尺寸:使用`png()`、`pdf()`、`jpeg()...
    99+
    2023-09-14
    R语言
  • Win7开始菜单“我最近的文档”不显示如何解决
    如果您的Windows 7开始菜单中的“我最近的文档”选项不显示或为空,可以尝试以下几种方法来解决问题: 检查最近文档功能是否启...
    99+
    2023-10-21
    Win7
  • 电脑右下角任务栏不显示安全删除硬件如何解决
    今天小编给大家分享一下电脑右下角任务栏不显示安全删除硬件如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。按 Win +...
    99+
    2023-06-27
  • Pandas Matplotlib保存图形时坐标轴标签太长导致显示不全如何解决
    这篇文章主要介绍“Pandas Matplotlib保存图形时坐标轴标签太长导致显示不全如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Pandas Matplotlib保...
    99+
    2023-07-02
  • 如何解决vue-cli+iview项目打包上线之后图标不显示问题
    这篇文章主要介绍如何解决vue-cli+iview项目打包上线之后图标不显示问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!做vue项目使用的iviewUI库,打包上线之后发现ic...
    99+
    2024-04-02
  • 如何解决Win7任务栏预览不见了鼠标移动到任务栏只显示标题的问题
    在使用电脑时经常会同时打开很多窗口,一般只有一个窗口可以显示在最前面,需要查看其它窗口就要来回切换才行。针对这个问题,微软在Win7系统中增加了“任务栏缩略图预览”功能,只要将鼠标移到任务栏相应的...
    99+
    2023-05-26
    Win7 任务栏 鼠标 标题 问题
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作