解决elementui导航折叠卡顿的问题
更新时间：2024年07月01日 08:41:01 作者：沐沐茶壶
这篇文章主要介绍了解决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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现旋转木马动画，图片数量无限制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了用vue构建多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了vue element plus多语言切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vue获取DOM元素并修改属性或者样式，文中通过两种方法给大家介绍了vue 如何获取并操作DOM元素,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue自定义询问弹框和输入弹框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
vue tab切换,解决echartst图表宽度只有100px的问题
这篇文章主要介绍了vue tab切换,解决echartst图表宽度只有100px的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
ESLint在Vue3 + TypeScript中的配置与使用方法
在Vue项目中配置ESLint,可以确保代码风格的一致性和代码质量,这篇文章主要介绍了ESLint在Vue3+TypeScript中配置与使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-12-12
最新评论