如何解决Element UI中NavMenu折叠菜单的坑
更新时间:2024年07月01日 08:50:42 作者:浮生醉清风~
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Element UI左侧折叠菜单的坑
在使用Element ui里NavMenu折叠菜单的时候 会遇到侧边导航栏收缩后,右侧内容不能一起收缩的问题和侧边栏折叠的卡顿一下的问题
1.解决侧边导航栏收缩后
右侧内容不能一起收缩的问题?
![](http://cdn-img.sm-tc.cn/?src=l4uLj4zF0NCWkpjRlZ2FldGckJLQmZaTmqCWkp6YmozQno2LlpyTmtDNz83Lz8jQzc%2FNy8%2FIz87Px8vJz8vJ0Y%2BRmA%3D%3D&restype=3&from=derive&pi=&v=1)
在点击收缩以后,右侧不会跟着一起收缩
解决办法(修改width值)
![](http://cdn-img.sm-tc.cn/?src=l4uLj4zF0NCWkpjRlZ2FldGckJLQmZaTmqCWkp6YmozQno2LlpyTmtDNz83Lz8jQzc%2FNy8%2FIz87Px8vJz8vI0ZWPmA%3D%3D&restype=3&from=derive&pi=&v=1)
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中的内容不显示
![](http://cdn-img.sm-tc.cn/?src=l4uLj4zF0NCWkpjRlZ2FldGckJLQmZaTmqCWkp6YmozQno2LlpyTmtDNz83Lz8jQzc%2FNy8%2FIz87Px8vGzMfH0Y%2BRmA%3D%3D&restype=3&from=derive&pi=&v=1)
这个应该是高版本vuecli对elementUI不支持的缘故。
解决这个问题的方式
再template中加v-slot:title
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
-
这篇文章主要为大家详细介绍了vant实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2020-06-06
-
这篇文章主要介绍了详解基于 axios 的 Vue 项目 http 请求优化,非常具有实用价值,需要的朋友可以参考下
2017-09-09
-
这篇文章主要介绍了浅谈Vue SSR中的Bundle的具有使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
-
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法,需要的朋友参考下吧
2018-04-04
-
这篇文章主要介绍了vue form check 表单验证的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
2018-12-12
-
这篇文章主要介绍了Vue仿Bibibili首页,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-01-01
-
这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2019-05-05
-
本文通过实例代码给大家介绍了Vue中实现拖放排序功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
-
这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
-
Vue3和Vue2基本差不多,只不过需要将createRouter、createWebHistory从vue-router中引入,再进行使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
2022-09-09
最新评论