如何解决Element UI中NavMenu折叠菜单的坑
更新时间：2024年07月01日 08:50:42 作者：浮生醉清风~
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Element UI左侧折叠菜单的坑
在使用Element ui里NavMenu折叠菜单的时候 会遇到侧边导航栏收缩后，右侧内容不能一起收缩的问题和侧边栏折叠的卡顿一下的问题
1.解决侧边导航栏收缩后
右侧内容不能一起收缩的问题？
在点击收缩以后，右侧不会跟着一起收缩
解决办法(修改width值)
2.解决ElementUi Nav侧边栏折叠的卡顿一下的问题
使用ElementUi Nav侧边栏自带的折叠动画，文字会卡顿一下再消失，非常难受解决方案
使用官方的折叠动画没有，所以我的方案是开启折叠动画后解决滚动条的问题，自己写个过渡，再把文字消失的速度加快，这样能比较流畅的折叠展开
/* 加过渡给侧边导航*/
.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;
}
Element ui NavMenu导航菜单折叠后template中的内容不显示
这个应该是高版本vuecli对elementUI不支持的缘故。
解决这个问题的方式
再template中加v-slot:title
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文会通过一个简单的vue-toast插件，来帮助了解掌握插件的开发和使用。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了vue实现二级弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Vue中div contenteditable 的光标定位方法
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue cli如何配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
vue2使用element-ui,el-table不显示,用npm安装方式
这篇文章主要介绍了vue2使用element-ui,el-table不显示,用npm安装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue模块移动组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
vue单文件组件lint error自动fix与styleLint报错自动fix详解
这篇文章主要给大家介绍了关于vue单文件组件lint error自动fix与styleLint报错自动fix的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
使用elementuiadmin去掉默认mock权限控制的设置
这篇文章主要介绍了使用elementuiadmin去掉默认mock权限控制的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了Vue3必学技巧-自定义Hooks-让写Vue3更畅快示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue实现图形验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论