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)
            })

显示效果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言入门到精通之练习实例9:输出国际象棋棋盘

题目&#xff1a;要求输出国际象棋棋盘。 程序分析&#xff1a;国际象棋棋盘由64个黑白相间的格子组成&#xff0c;分为8行*8列。用i控制行&#xff0c;j来控制列&#xff0c;根据ij的和的变化来控制输出黑方格&#xff0c;还是白方格。 如果出现乱码情况请参考本博客【C 练习…

前端文件上传(文件上传,分片上传,断点续传)

普通文件上传 思路&#xff1a; 首先获取用户选择的文件对象&#xff0c;并将其添加到一个 FormData 对象中。然后&#xff0c;使用 axios 的 post 方法将 FormData 对象发送到服务器。在 then 和 catch 中&#xff0c;我们分别处理上传成功和失败的情况&#xff0c;并输出相应…

VM虚拟机忘记密码,ISO镜像修改

VM虚拟机忘记密码&#xff0c;ISO镜像修改 制作镜像&#xff1a; 镜像已制作&#xff0c;可在文末链接自行获取从镜像启动系统 1&#xff09;添加IOS镜像文件&#xff1a; 2&#xff09;开机进去固件&#xff1a; 进入后选择对应的驱动器启动 3. 修改密码 点击修改密码软件&a…

苹果、VMware、Apache等科技巨头漏洞被大量应用

Therecord网站披露&#xff0c;黑客因频繁利用多个新发现的漏洞发起攻击吸引了美国网络安全专家们的高度关注&#xff0c;专家们担心这些漏洞可能会被网络犯罪组织和其他各国政府用于不法目的。 过去一周&#xff0c;美国网络安全专家和网络安全与基础设施安全局&#xff08;C…

Dify学习笔记-入门学习(二)

1、官方文档链接 https://docs.dify.ai/v/zh-hans/getting-started/readme 2、 Dify基础介绍 Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务&#xff08;Backend as Service&#xff09;和 LLMOps 的理念&#xff0c;使开发者可以快速搭建生产级的生成…

鲜花商城,Java项目、前端vue

系统架构 后台&#xff1a; SpringBoot Mybatis-plus Mybatis Hutool工具包 lombok插件 前台&#xff1a;Vue Vue Router ELementUI Axios 系统简介 功能&#xff1a;首页推荐&#xff08;默认根据用户买过的商品进行推荐&#xff0c;如果没买过则根据商品销量推荐&…

8种策略教你有效的ddos攻击防御方法

这篇文章讨论了缓解DDoS&#xff08;分布式拒绝服务&#xff09;攻击的最佳实践。DDoS攻击是一种旨在使目标服务器或网络超载而无法正常工作的恶意行为。文章提出了一系列策略来减轻DDoS攻击的影响&#xff0c;包括流量过滤和封堵、负载均衡和弹性扩展、使用CDN&#xff08;内容…

函数递归和迭代(简单认识)

1.递归思想 把一个大型复杂问题层层转化为一个与原问题相似&#xff0c;但规模较小的子问题来求解&#xff1b;直到子问题不能再被拆分&#xff0c;递归就结束了。所以递归的思考方式就是把大事化小的过程。递归中的递就是递推的意思&#xff0c;归就是回归的意思&#xff0c;…

excel 设置密码保户

目录 前言设置打开密码设置编辑密码 前言 保户自己的数据不被泄漏是时常有必要的&#xff0c;例如财务数据中最典型员工工资表&#xff0c;如果不设置密码后果可想而知&#xff0c;下面我们一起来设置excel查看密码和编辑密码。我用的是wps,其它版本类似&#xff0c;可自行查资…

Qt解析含颜色的QString字符串显示到控件

1、需求 开发接收含颜色字符串显示到窗口&#xff0c;可解析字符串颜色配置窗口属性&#xff0c;且分割字符串显示。 mprintf(“xxxxxx”)&#xff1b;打印的xxxxxx含有颜色配置。 2、实现方法 2.1、条件 选用Qt的PlainTextEdit控件显示字符串&#xff0c;配置为只读模式 …

C++笔记(二)

函数的默认参数 如果我们自己传入数据&#xff0c;就用自己的数据&#xff0c;如果没有&#xff0c;就用默认值 语法&#xff1a; 返回值类型 函数名&#xff08;形参默认值&#xff09;{} int func&#xff08;int a&#xff0c;int b20&#xff0c;int c30&#xff09;{} …

[BUG] Authentication Error

前言 给服务器安装了一个todesk&#xff0c;但是远程一直就是&#xff0c;点击用户&#xff0c;进入输入密码界面&#xff0c;还没等输入就自动返回了 解决 服务器是无桌面版本&#xff0c;或者桌面程序死掉了&#xff0c;重新安装就好 sudo apt install xorg sudo apt inst…

C++入门语法———命名空间,缺省参数,重载函数

文章目录 一.命名空间1.存在意义2.语法使用1.定义命名空间2.使用命名空间的三种方式 二.缺省参数1.全缺省参数2.半缺省参数 三.重载函数1.定义2.重载原理———名字修饰 一.命名空间 1.存在意义 C命名空间的主要意义是为了避免命名冲突&#xff0c;尤其是在大型项目中可能存在…

ai伪原创生成器app,一键生成原创文章

近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;AI伪原创生成器App已经成为了许多写手和创作者们的新宠。这款AI伪原创生成器App以其一键生成原创文章的快速便捷性&#xff0c;正在引起广泛的关注和使用。下面跟随小编一起来了解下吧&#xff01; 随着互联网的普及&…

8 种不同类型的防火墙

一、什么是防火墙&#xff1f; 防火墙是一种监视网络流量并检测潜在威胁的安全设备或程序&#xff0c;作为一道保护屏障&#xff0c;它只允许非威胁性流量进入&#xff0c;阻止危险流量进入。 防火墙是client-server模型中网络安全的基础之一&#xff0c;但它们容易受到以下方…

内网环境pip使用代理服务器安装依赖库

目录 使用proxy参数配置pip代理 使用配置文件配置pip代理 其他 由于公司内部网络无法访问外网导致安装依赖库失败&#xff0c;现将安装方法如下记录。 使用proxy参数配置pip代理 如不使用离线安装方法&#xff0c;可利用pip的--proxy参数进行代理的配置&#xff0c;使用方法…

1.15火星人(全排列+变进制数),涂国旗(搜索)

P1088 [NOIP2004 普及组] 火星人 首先是要得到当前排序的排名&#xff0c;其次是要得到它的排名 n进制就是说满n就进&#xff0c;该位上不可能保持为n&#xff0c;最多保持为n-1&#xff1b; 变进制数 #include<iostream> #include<iomanip> #include<vector…

力扣518. 零钱兑换 II

动态规划 思路&#xff1a; 假设 dp[i] 为金额 i 使用零钱的组合数&#xff0c;其可以由其中的一种零钱 coin 和 i - coin 组合&#xff1b; 遍历零钱数组&#xff0c;对每一种零钱 coin 进行如下操作&#xff1a; 从 coin 到 amount 金额进行遍历&#xff0c;dp[j] dp[j] d…

【深度学习:Collaborative filtering 协同过滤】深入了解协同过滤:技术、应用与示例

此图显示了使用协作筛选预测用户评分的示例。起初&#xff0c;人们会对不同的项目&#xff08;如视频、图像、游戏&#xff09;进行评分。之后&#xff0c;系统将对用户对项目进行评分的预测&#xff0c;而用户尚未评分。这些预测基于其他用户的现有评级&#xff0c;这些用户与…

安全基础~通用漏洞1

文章目录 知识补充Acess数据库注入MySQL数据库PostgreSQL-高权限读写注入MSSQL-sa高权限读写执行注入Oracle 注入Mongodb 注入sqlmap基础命令 知识补充 order by的意义&#xff1a; union 操作符用于合并两个或多个 select语句的结果集。 union 内部的每个 select 语句必须拥有…