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

显示效果:

相关推荐

  1. C++Qt做一个鼠标在按钮上悬浮3s显示一个悬浮窗口

    2024-01-23 16:46:01       30 阅读
  2. Keil C51 汉字显示 BUG 解决方案

    2024-01-23 16:46:01       45 阅读
  3. WPF 控件禁用时,显示悬浮提示

    2024-01-23 16:46:01       42 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-23 16:46:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-23 16:46:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-23 16:46:01       82 阅读
  4. Python语言-面向对象

    2024-01-23 16:46:01       91 阅读

热门阅读

  1. FastApi-异常处理(6)

    2024-01-23 16:46:01       52 阅读
  2. fbx转换bvh python代码

    2024-01-23 16:46:01       56 阅读
  3. 【Docker】Docker学习⑤ - Docker数据管理

    2024-01-23 16:46:01       47 阅读
  4. 数据库建模

    2024-01-23 16:46:01       65 阅读
  5. C# 判断文件路径的后缀是否是某个后缀

    2024-01-23 16:46:01       70 阅读
  6. 怎么调试开关电源?具体方法是什么?

    2024-01-23 16:46:01       59 阅读
  7. 51单片机实验课一

    2024-01-23 16:46:01       60 阅读
  8. 基于Linux系统使用Kind快速安装体验kubernetes

    2024-01-23 16:46:01       57 阅读
  9. kafka的基本使用--学习笔记

    2024-01-23 16:46:01       60 阅读