VUE+Vis.js鼠标悬浮title提前显示BUG解决方法

news2024/9/27 19:17:57

在使用VUE+Vis.js做拓扑图,利用鼠标悬浮放在图标展示设备信息时,发现鼠标一放在图标上面时,标题表会提前在放置的元素下显示,鼠标再放到图标上去元素才会隐藏变成悬浮状态

 解决方法:

添加一个div元素,设置v-show="false",将作为悬浮窗的元素放进去,因为v-show只是隐藏元素,元素还在页面内,而作为悬浮窗的元素通过this.$refs只会获取当前元素,当元素被拿去作为悬浮窗,是可以正常显示的。

元素代码:

         <div v-show="false">
                <div ref="lldpTable">
                    <table class="sl-show-table">
                        <thead>
                            <tr>
                                <th colspan="3">
                                    {{ selectSwitch.host }}
                                </th>
                            </tr>
                            <tr>
                                <th>本地端口</th>
                                <th>邻居端口</th>
                                <th>邻居地址</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="next in selectSwitch.nexts" :key="next.remoteHost">
                                <td>
                                    {{ next.loaclPort }}
                                </td>
                                <td>
                                    {{ next.remotePort }}
                                </td>
                                <td>
                                    {{ next.remoteHost }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

Vis.js节点代码:

                let node = {
                    id: item.host,
                    label: item.host + (item.centre ? '(核心)' : ''),
                    title: this.$refs.lldpTable,
                    shape: 'image',
                    image: item.image,
                    font: {
                        color: '#000000',
                    },
                    physics: false,
                    x: item.x,
                    y: item.y,
                }

Vis.js鼠标悬浮代码:

            //鼠标悬浮
            this.network.on('hoverNode', (e) => {
                this.selectSwitch = data.find(c => c.host === e.node)
            })

显示效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1408157.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从零开始训练 YOLOv8最新8.1版本教程说明(包含Mac、Windows、Linux端 )同之前的项目版本代码有区别

从零开始训练 YOLOv8 - 最新8.1版本教程说明 本文适用Windows/Linux/Mac:从零开始使用Windows/Linux/Mac训练 YOLOv8 算法项目 《芒果 YOLOv8 目标检测算法 改进》 适用于芒果专栏改进 YOLOv8 算法 文章目录 官方 YOLOv8 算法介绍改进网络代码汇总第一步 配置环境1.1 系列配…

01、领域驱动设计:微服务设计为什么要选择DDD总结

目录 1、前言 2、软件架构模式的演进 3、微服务设计和拆分的困境 4、为什么 DDD适合微服务 5、DDD与微服务的关系 6、总结 1、前言 我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;不同的人会根据自己对微服务的理 解而拆分出不同的微服…

搭建《幻兽帕鲁》服务器需要怎样配置的云服务器?

随着《幻兽帕鲁》这款游戏的日益流行&#xff0c;越来越多的玩家希望能够在自己的服务器上体验这款游戏。然而&#xff0c;搭建一个稳定、高效的游戏服务器需要仔细的规划和配置。本文将分享搭建《幻兽帕鲁》服务器所需的配置及搭建步骤&#xff0c;助力大家获得更加畅快的游戏…

STM32 USB DFU固件升级的设计与实现

STM32微控制器支持通过USB DFU&#xff08;Device Firmware Upgrade&#xff09;协议进行固件升级&#xff0c;这使得设备可以在不需要特殊的调试工具或编程器的情况下&#xff0c;通过USB接口实现固件的更新。在本文中&#xff0c;我们将介绍如何设计和实现STM32 USB DFU固件升…

呼叫中心的管理流程

很难想象同一个客户不同时间来电购买同样的产品会得到完全不同的服务过程。许多呼叫中心都有这种“无章可循”或“有章不循”的现象&#xff0c;这也是导致呼叫中心低效率、高成本、高投诉的重要原因&#xff0c;同时也是无法建立良好客户体验的原因之一。呼叫中心流程管理的目…

yarn集群HDFS datanode无法启动问题排查

一、问题场景 hdfs无法访问&#xff0c;通过jps命令查看进程&#xff0c;发现namenode启动成功&#xff0c;但是所有datanode都没有启动&#xff0c;重启集群&#xff08;start-dfs.sh&#xff09;后仍然一样 二、原因分析 先看下启动的日志有无报错。打开Hadoop的日志目录 …

《WebKit 技术内幕》学习之五(3): HTML解释器和DOM 模型

3 DOM的事件机制 基于 WebKit 的浏览器事件处理过程&#xff1a;首先检测事件发生处的元素有无监听者&#xff0c;如果网页的相关节点注册了事件的监听者则浏览器会将事件派发给 WebKit 内核来处理。另外浏览器可能也需要处理这样的事件&#xff08;浏览器对于有些事件必须响应…

dayjs挂载到vue3全局属性上面

首先就是安装dayjs npm install dayjs 打开main.ts //dayjs import * as dayjs from dayjs //引入插件 import * as relativeTime from dayjs/plugin/relativeTime.js import * as isLeapYear from dayjs/plugin/isLeapYear // 导入插件 import dayjs/locale/zh-cn // 导入本…

“史上最大数据泄露事件”是真还是假?

昨&#xff08;2024年1月23日&#xff09;天深夜&#xff0c;腾迅网>观点新媒体官方账号发布的《网络安全公司警告史上最大数据泄露事件 腾讯或占15亿条》这一消息&#xff0c;真让人闻之顿生石破惊天之感&#xff01;尤其是笔者&#xff0c;因长期被网络假消息欺骗&#xf…

【51单片机】点亮第一个LED灯

目录 点亮第一个LED灯单片机 GPIO 介绍GPIO 概念GPIO 结构 LED简介软件设计点亮D1指示灯LED流水灯 橙色 点亮第一个LED灯 单片机 GPIO 介绍 GPIO 概念 GPIO&#xff08;general purpose intput output&#xff09; 是通用输入输出端口的简称&#xff0c; 可以通过软件来控制…

【Go面试向】defer与time.sleep初探

【Go面试向】defer与time.sleep初探 大家好 我是寸铁&#x1f44a; 总结了一篇defer传参与time.sleep初探的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 请大家看下面这段代码&#xff0c;看运行结果会出现什么&#xff0c;为什么&#xff1f; 问题 demo package mainim…

pycharm安装过程

1、安装包官网下载 PyCharm: the Python IDE for Professional Developers by JetBrains 点击下载 下拉选择社区版本 选择下载 下载完成后&#xff0c;双击exe安装。 安装完成&#xff0c;生成的桌面快捷方式 同意并继续 进入开发界面

Linux 下 TFTP 服务搭建及 U-Boot 中使用 tftp 命令实现文件下载

目录 搭建 TFTP 服务文件下载更多内容 TFTP&#xff08;Trivial File Transfer Protocol&#xff0c;简单文件传输协议&#xff09;是 TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务&#xff0c;端口号…

【CANoe使用大全】——DBC数据库制作

文章目录 1.DBC数据库选择1.1.DBC模板选择1.3. 新建报文1.4. 新建信号1.5.数值表建立 2. DBC导入 1.DBC数据库选择 首先找到DBC编辑器入口 1.1.DBC模板选择 举例说明&#xff1a; 新建选择CANFD的模板 1.3. 新建报文 注意上图中报文周期“Cycle Time”处于不可编辑状态…

最新综述!3D Gaussian Splatting

作者&#xff1a;小柠檬 | 来源&#xff1a;3DCV 在公众号「3DCV」后台&#xff0c;回复「原论文」可获取论文 文章介绍了3D高斯喷洒在场景重建和渲染中的应用&#xff0c;并探讨了其在机器学习和计算机视觉领域的潜在应用。文章还提供了3D高斯喷洒的基本原理和优化方法&#x…

基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/n…

HTTP动态代理的原理及其对网络性能的影响

HTTP动态代理是一种通过代理服务器来转发HTTP请求和响应数据的网络技术&#xff0c;它可以优化网络性能、提高网络安全性&#xff0c;并解决跨域请求的问题。本文将详细介绍HTTP动态代理的原理及其对网络性能的影响。 一、HTTP动态代理的原理 HTTP动态代理的基本原理是在客户…

免费SSL申请和自动更新

当前是在mac下操作 安装certbot # mac下brew安装即可 brew install certbotcentos 安装 centos安装文档 申请泛解析证书 sudo certbot certonly --manual --preferred-challengesdns -d *.yourdomain.com## 输出 Saving debug log to /var/log/letsencrypt/letsencrypt.lo…

【Kafka】高级特性:生产者

目录 消息发送消息生产流程ProducerRecord序列化器分区器拦截器 生产者原理剖析主线程消息累加器 发送线程 生产者参数 消息发送 消息生产流程 整个流程如下&#xff1a; Producer创建时&#xff0c;会创建一个Sender线程并设置为守护线程。生产消息时&#xff0c;内部其实是…

幻兽帕鲁PalWorld服务器搭建详细教程

幻兽帕鲁PalWorld是一款由Pocketpair开发的游戏&#xff0c;融合了多种玩法&#xff0c;其独特的题材和画风吸引了很多玩家。为了更好地进行游戏体验&#xff0c;很多玩家选择自行搭建服务器。本文将详细介绍如何搭建幻兽帕鲁PalWorld服务器。 第一步&#xff1a;购买服务器 根…