场景:后台系统,实现侧边栏的隐藏显示功能

使用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;
  }
}
复制代码

完成如上情况之后,就可以很愉快的实现侧边栏隐藏显示效果啦~~

转载于:https://juejin.im/post/5cac69cb6fb9a068b65e0c48

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐