ElementUI側邊欄導航選單隱藏顯示問題

幾何。發表於2019-04-09

場景:後臺系統,實現側邊欄的隱藏顯示功能

使用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;
  }
}
複製程式碼

完成如上情況之後,就可以很愉快的實現側邊欄隱藏顯示效果啦~~

相關文章