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

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

 解决方法：

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

元素代码：

         

                

                    

                        

                            

                                

                                    {{ selectSwitch.host }}
                                
                            
                            

                                
本地端口
                                
邻居端口
                                
邻居地址
                            
                        
                        

                            

                                

                                    {{ next.loaclPort }}
                                
                                

                                    {{ next.remotePort }}
                                
                                

                                    {{ next.remoteHost }}
                                
                            
                        
                    
                
            

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

显示效果：