場景:後臺系統,實現側邊欄的隱藏顯示功能
使用ElementUI佈局容器時
需要注意的情況
在使用<el-aside>
標籤時,預設的寬度是60px。
如果要實現隱藏顯示的話,則需要新增width="initial"
屬性
<el-aside width="initial"></el-aside>
複製程式碼
使用自帶的隱藏顯示功能時
需要注意的情況
設定側邊欄寬度時,必須將.el-menu--collapse排除,否則動畫效果出現BUG
<el-menu class='demo'></el-menu>
// scss寫法
.demo {
height: 100vh;
&:not(.el-menu--collapse) {
width: 180px;
}
}
複製程式碼
完成如上情況之後,就可以很愉快的實現側邊欄隱藏顯示效果啦~~