解决Element UI中NavMenu 折叠菜单的坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决Element UI中NavMenu 折叠菜单的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决Element UI左侧折叠菜单的坑

前言

在使用Element ui里NavMenu折叠菜单的时候会遇到侧边导航栏收缩后，右侧内容不能一起收缩的问题和侧边栏折叠的卡顿一下的问题，下面让我们一起解决一下吧

一、解决侧边导航栏收缩后，右侧内容不能一起收缩的问题？

解决Element UI中NavMenu 折叠菜单的坑

在点击收缩以后，右侧不会跟着一起收缩

解决办法(修改width值)

解决Element UI中NavMenu 折叠菜单的坑

二、解决ElementUi Nav侧边栏折叠的卡顿一下的问题

使用ElementUi Nav侧边栏自带的折叠动画，文字会卡顿一下再消失，非常难受

解决方案

使用官方的折叠动画没有，所以我的方案是开启折叠动画后解决滚动条的问题，自己写个过渡，再把文字消失的速度加快，这样能比较流畅的折叠展开文章来源地址https://www.toymoban.com/news/detail-509382.html

/* 加过渡给侧边导航*/
.el-aside {
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
/*加快侧边栏文字消失的速度*/
.el-menu {
  transition: all 10ms;
}