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

在使用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.mzph.cn/news/644534.shtml

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

相关文章

linux修改文件夹下所有文件的权限(常用)

1、 修改文件夹下所有文件的权限 # filename为要修改的文件夹名字。-R应该是表示递归修改filename文件夹下所有文件的权限 sudo chmod -R 777 filename2、linux修改单个文件夹权限 sudo chmod 600 &#xff08;只有所有者有读和写的权限&#xff09; sudo chmod 644 &#…

Java 设计者模式以及与Spring关系(七) 命令和迭代器模式

简介: 本文是个系列一次会出两个设计者模式作用&#xff0c;如果有关联就三个&#xff0c;除此外还会讲解在spring中作用。 23设计者模式以及重点模式 我们都知道设计者模式有3类23种设计模式&#xff0c;标红是特别重要的设计者模式建议都会&#xff0c;而且熟读于心&#…

什么是EJB?

什么是EJB&#xff1f; EJB (Enterprise JavaBeans) 是一种用于开发企业级应用程序的 Java 服务器端组件模型。它是一种分布式对象架构&#xff0c;用于构建可移植、可伸缩和可事务处理的企业级应用。 EJB 提供了一种将业务逻辑组件化、模块化的方式&#xff0c;使开发人员能够…

李跳跳派大星v2.2.0软件安装教程(附软件下载地址)

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; 李跳跳派大星v2.2.0最新安卓版是一款功能强大的Guang告屏蔽软件。它为用户提供了一种快速、便捷的方式来去除各种软件中的开屏Guang告&#xff0c;让…

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

4 影子&#xff08;Shadow&#xff09;DOM 影子 DOM 是一个新东西&#xff0c;主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM 当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素…

Spring Security 之摘要认证

摘要认证 注意: 在现代应用程序中不应该使用摘要认证,因为它不被认为是安全的。最明显的问题是你必须以明文或加密或 MD5 格式存储密码。所有这些存储格式都被认为是不安全的。相反,你应该使用单向自适应密码哈希(如 bCrypt、PBKDF2、SCrypt 等)来存储凭据,而这是摘要认…

STL第一讲

一、认识headers、版本、重要资源 1. C Standard Library和Standard Template Library 前者&#xff1a;c标准库&#xff1b;后者直译为“标准模板库” 区别: C标准库&#xff1a;是c编译器提供的自带的头文件(不带.h后缀)新版兼容C的头文件的形式cxxxx&#xff1b;旧版的xxx…

简单Web UI 自动化测试框架 seldom

pyse 更名为 seldom WebUI automation testing framework based on Selenium and unittest. 基于 selenium 和 unittest 的 Web UI自动化测试框架。 特点 提供更加简单API编写自动化测试。提供脚手架&#xff0c;快速生成自动化测试项目。自动生成HTML测试报告生成。自带断言方…

100GB Mellanox InfiniBand 网卡虚拟化技术调研

调研目的 验证 Mellanox InfiniBand 100GB网卡和SR650 Server能兼容 ThinkSystem SR650 Power On (Booting OS or in undetected OS) Machine Type/Model7X05CTO1WW 验证 SR-IOV虚拟话技术在BIOS/Firmware/Kernel/QEMU/Libvirt能被支持 4.18.0-305.19.1.el8_4.x86_64 验证…

Web开发5:第三方扩展与部署

在Web开发中&#xff0c;第三方扩展和部署是提高开发效率和功能扩展的重要手段。第三方扩展可以帮助我们快速集成常用功能和工具&#xff0c;而部署则是将我们的应用程序发布到生产环境中。本文将介绍第三方扩展的重要性、如何选择和使用常见的第三方扩展&#xff0c;并讨论应用…

Java Web(三)--CSS

介绍 为什么需要&#xff1a; 在没有 CSS 之前&#xff0c;想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性&#xff0c;费心费力&#xff1b;CSS 可以让 html 元素(内容) 样式(CSS)分离&#xff0c;提高web 开发的工作效率(针对前端开发)&#xff0c;从而…

论文翻译:On Bringing Robots Home

On Bringing Robots Home 关于引入机器人到家庭 文章目录 On Bringing Robots Home关于引入机器人到家庭1 Introduction1 引言2 Technical Components and Method2 技术组件与方法2.1 Hardware Design2.1 硬件设计2.2 Pretraining Dataset – Homes of New York2.2 预训练数据…

微信小程序开发创建component组件,报错WXML file not found解决方案

报错如下&#xff1a; 解决方案&#xff1a; 在组件.json文件加上"styleIsolation": "apply-shared",&#xff1a;

C++ 数论相关题目(欧拉函数)

欧拉函数 给定 n 个正整数 ai &#xff0c;请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 。 若在算数基本定理中&#xff0c;Npa11pa22…pamm &#xff0c;则&#xff1a; ϕ(N) Np1−1p1p2−1p2…pm−1pm 输…

人工智能的未来:机遇与挑战

人工智能的未来:机遇与挑战 0引言 随着科技的飞速发展,人工智能(AI)已经成为了我们生活中不可或缺的一部分。从智能手机、自动驾驶汽车到智能家居系统,人工智能的应用已经深入到各个领域。然而,尽管人工智能为我们带来了诸多便利,但它也引发了一系列关于隐私、安全和道…

Spring Security 之 表单登录

表单登录 Spring Security提供了支持通过HTML表单提供用户名和密码。本节详细介绍了Spring Security中表单身份验证的工作原理。 本节将介绍Spring Security中的基于表单的登录工作原理。首先,我们将看到用户如何被重定向到登录表单。 第1步,用户首先对其未经授权的资源(/…

【Spring】Spring AOP原理

文章目录 前言代理模式静态代理动态代理JDK动态代理CGLib 动态代理 总结 前言 前面我们学习了关于 Spring AOP 的使用&#xff0c;那么今天这篇文章&#xff0c;我们将深入理解 Spring AOP 的原理&#xff0c;也就是 Spring 是如何实现 AOP 的。 Spring AOP 是基于动态代理来…

matlab抽取与插值

什么是抽取&#xff1f; 我们假设一个数字信号 x ( n ) , n 1 , 2 , . . . , N x(n),n1,2,...,N x(n),n1,2,...,N共有 N N N个点&#xff0c;抽取就是每个几个点抽1个点&#xff0c;比如2倍抽取&#xff0c;那么抽取后的信号为 y ( n ) , y ( 1 ) x ( 1 ) , y ( 2 ) x ( 3 …

IO 专题

使用try-with-resources语句块&#xff0c;可以自动关闭InputStream [实践总结] FileIUtils 共通方法最佳实践 [实践总结] java 获取在不同系统下的换行符 [实践总结] StreamIUtils 共通方法最佳实践 斜杠“/“和反斜杠“\“的区别 路径中“./”、“…/”、“/”代表的含义…

你真的会数据结构吗:顺序表

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 又和大家见面啦&#xff01;在大家看到这个标题的时候其实就已经发现了&#xff1a;我们的C语言的基础知识大…