在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、效果圖如下：
