,直接基于antd的基础上封装一下
实现的思路基本是一样的(哪怕是自己把组件都写了)
----
实现思路
思路
用mobx来维护打开的菜单数据,数据用数组来维护
考虑追加,移除过程的去重
数据及行为的设计...结合路由进行响应
目标
点击tab展示页面内容,同时关联侧边栏的菜单
tab自身可以关闭,注意规避只有一个的时候不显示关闭按钮,高亮的
杜绝重复点击tab的时候(tab和路由匹配的情况),再次渲染组件...一键关闭除当前url以外的的所有tab
重定向的时候也会自动展开侧边栏(路由表存在匹配的情况)
可拓展的方向
有兴趣的自行拓展,具体idea如下
比如快速跳转到第一个或者最后一个的快捷菜单等
给侧边栏的子菜单都带上...icon,这样把icon同步到水平菜单就比较好看了,目前水平都是直接写死
加上水波纹动效,目前没有..就是MD风格点一下扩散那种
拖拽,这样可以摆出更符合自己使用习惯的水平菜单
固定额外不被消除的标签,...以及访问的url
追加的action,删除的action
只读的历史集合,只读的当前路由对象集合
思路有了.剩下就是东西的出炉了,先构建model,其实就是mobx数据结构
import { observable