問題
使用element導(dǎo)航菜單做側(cè)邊欄菜單拓萌，用遞歸組件實現(xiàn)路由菜單渲染留凭，遇到兩個問題
- 折疊后文字不隱藏
- 折疊動畫會有延遲佃扼，補流程
官網(wǎng)代碼粘貼后發(fā)現(xiàn)官網(wǎng)的例子并沒有這種情況，那就找問題根源蔼夜；
問題1
度娘找到原因 element-ui 的<el-menu>標(biāo)簽本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一兼耀，但是卻嵌套了<div>,而導(dǎo)致收折就隱藏不了文字。
因為我們的遞歸組件最外層有一個<div>標(biāo)簽
<template>
<div class="slid-menu-item"> //這個div影響我們文字隱藏
<!-- 是否只有一個子項 -->
<template v-if="hasOneShowingChild(route.children,route)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" @click="setActivePath(resolvePath(onlyOneChild.path))">
<i class="el-icon-menu"></i>
<span slot="title">{{onlyOneChild.meta.title}}</span>
</el-menu-item>
</template>
<!-- 有二級菜單 -->
<template v-else>
<el-submenu :index="route.path">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">{{route.meta.title}}</span>
</template>
<side-menu-item
v-for="child in route.children"
:key="child.path"
:route="child"
:basePath="resolvePath(child.path)"
></side-menu-item>
</el-submenu>
</template>
</div>
</template>
設(shè)置css樣式隱藏文字
/*隱藏文字*/
.el-menu--collapse .el-submenu__title span{
display: none;
}
/*隱藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow{
display: none;
}
問題2：
設(shè)置側(cè)邊欄寬度時，必須將.el-menu--collapse排除瘤运，否則動畫效果出現(xiàn)BUG
.el-menu {
height: 100%;
}
.el-menu:not(.el-menu--collapse) {
width: 200px;
}
