一、问题描述
antd pro的混合菜单模式,算是一种比较新的导航菜单模式,可以让顶部全局导航+侧边导航混合模式同时出现,满足一些特别的需求。
ProLayout高级布局组件的API里有一个layout参数,可以设置layout的菜单模式,我们可以在config配置文件做配置。
// layout的菜单模式。side:右侧导航,top:顶部导航,mix: 混合菜单
layout: 'side' | 'top' | 'mix';
那么问题来了,为什么我们把layout设置为mix后,界面的导航菜单看起来还是和side右侧导航模式一样呢,并没产生改变。为什么会不生效呢?这是很多首次应用mix模式的同学都会产生疑惑的地方。
二、解决方案
要实现理想中的混合菜单模式,即顶部全局导航+侧边导航混合,顶部展示一级菜单,侧边展示二三级菜单,我们还需要增加一个配置:splitMenus,即自动切割菜单,该功能只在mix模式下生效。具体配置如下:
layout: 'mix', // 菜单模式
splitMenus: true, // 切割菜单
具体效果如下:
【推荐文章】
微前端系列讲解--应用集成方案(qiankun+umi+vue)https://blog.csdn.net/w544924116/article/details/120105320antd pro项目使用qiankun,loading加载页不消失https://blog.csdn.net/w544924116/article/details/120164997Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错 / 同时使用mfsu和qiankun报错https://blog.csdn.net/w544924116/article/details/120123331引用window自定义变量以及ts在window上自定义变量数据类型报错的解决方案https://blog.csdn.net/w544924116/article/details/120251686
感谢您读完本文!如果本文对您有帮助,请点个赞呗,您的点赞是对我最大的支持和认可!
我的公众号:大前端教程,欢迎关注,会定期更新前端知识,希望能帮到您。