在el-submenux写一个悬浮框气泡卡展示图标标题，方案：利用三角形错位，营造一个假三角形错觉。。
1、html index为上一级传入的prop index，是每一级导航的索引值
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body :class="['menu-level-' + level]">
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
<!-- 悬浮气泡弹框-->
<div class="pop-content-title" :style="{top: (105+40*index) + 'px'}">{{item.meta.title}}
<div class="pop-content-title-triangle" :style="{top: (114+40*index) + 'px'}">
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
:level="level + 1"
/>
</el-submenu>
2、css
.hideSidebar .el-submenu:hover .pop-content-title{
position:fixed;
left:128px;
width:90px;
height:32px;
line-height:32px;
background-color:#fff;
color:#242424;
border:1px solid var(--Stroke-Light-Base, #E5E5E7);
border-radius:5px;
}
.hideSidebar .el-submenu:hover .pop-content-title-triangle{
position:fixed;
left:120px;
width:0;
height:0;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-right:9px solid var(--Stroke-Light-Base, #E5E5E7);
}
.hideSidebar .el-submenu:hover .pop-content-title-triangle::before{
position:absolute;
content:"";
left:1px;
top:-7px;
width:0;
height:0;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-right:9px solid #fff;
}
3、效果图如下：
