这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
最近开发后台,因为不想使用 ElementUI 和其他现成的 UI 框架,于是决定自己做。
碰到的第一个难题就是多级菜单。
因为之前没做过,第一次做起来还是有点难的,最后实现的效果是这样。注意看地址栏。

难题一 CSS 的实现

多级菜单的收缩,展开都是使用 CSS 控制,所以要配合 Vue 传值判断是否 active
在父组件加入 activeItem 告诉子组件哪个索引是活跃的。
菜单由于考虑是多级的,所以我们需要封装成一个组件,并且需要使用组件的递归调用自身已实现多级。

父组件

在父组件中,我们可以使用这种形式来记录菜单数据。

封装组件 Item

Item 是一个菜单的每一个小项。他接受来自父组件的 items 数组,然后使用 v-for 渲染每一个子菜单(不是一级菜单,是多级菜单的递归渲染)。在父组件中,也通过 v-for 渲染一级菜单。
子菜单中判断是否活跃一样是通过上级的 activeItem 是否等于 this.index

父组件调用组件

CSS 样式

以上步骤已经实现了对菜单加入和取消 CSS类 activehide
接下来就只要写这两个样式就行了。
这里就不说了,菜单的收缩可以使用 max-height 属性。

难点二 路由

到这,我已经查了很多文章,也想了很久,可能是我比较笨吧,一直没想出来。
最后,我想到了点击菜单时,先判断是不是尾菜单,就是不含子菜单的菜单,不可再下拉。
如果是,就合并上一级菜单的 path,(注意看前面的 path
那么只要在 handleClick 的时候加一层判断和跳转就行了。
最后贴一张想了很久画了很久的手稿,字丑勿喷。

完整代码

亲亲留个评论再走呗

正在加载评论区...