随风随遇随缘 发表于 2024-7-5 20:59:48

解决elementui导航折叠卡顿的问题

elementui导航折叠卡顿问题


第一种方法

网上很多建议使用el-aside去进行el-menu包裹,然后去除el-menu的折叠动画效果,之后给el-aside添加自定义动画效果控制width变化来实现折叠动画。

第二种方法

这里提供另一个解决思路,和上面那种异曲同工,没有使用el-aside去进行布局,而是直接使用的el-menu实现的侧边栏,去掉侧边栏的折叠动画效果,之后把折叠动画效果交给右侧头部导航的展开收起按钮,通过它控制left属性变化实现。
核心代码实现:

[*]侧边栏部分:


[*]右侧头部导航部分:




第三种方法

更简单的方法实现,前提还是通过右侧头部导航的展开收起按钮控制left属性变化实现折叠动画或者通过el-aside按照第一种方式实现折叠动画后,不用关闭el-menu本身动画,而是给el-menu添加class,

之后加上如下样式即可。
// 解决侧边栏折叠卡顿的问题
.new-el-menu--sidebar:not(.el-menu--collapse) {
    width: 220px;
}
总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/323522nrq.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 解决elementui导航折叠卡顿的问题