前言
动态tab水平菜单,这个需求很常见,特别是对于后台管理系统来说;
因为当我们侧边栏层级多了,你要找到一个子菜单,必须找,展开,点击....实现的思路基本是一样的(哪怕是自己把组件都写了)
----
实现思路
思路
用mobx来维护打开的菜单数据,数据用数组来维护
考虑追加,移除过程的去重
数据及行为的设计
结合路由进行响应
目标
点击...tab
重定向的时候也会自动展开侧边栏(路由表存在匹配的情况)
可拓展的方向
有兴趣的自行拓展,具体idea如下
比如快速跳转到第一个或者最后一个的快捷菜单等
给侧边栏的子菜单都带上icon,这样把icon...不会给关闭所有干掉
----
代码实现
RouterStateModel.js(mobx状态维护)
Model我们要考虑这么几点
侧边栏item的的组key,和子key,子name以及访问的url
追加的...因为感觉意义不大,水平菜单的宽度不管是pad上还是pc上,
默认一行最起码可以打开五个tab, 一般人的注意力都集中在几个常见的页面上
假如你需要更多呢?