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

难题一 CSS 的实现
多级菜单的收缩,展开都是使用 CSS 控制,所以要配合 Vue 传值判断是否
active
在父组件加入
activeItem
告诉子组件哪个索引是活跃的。菜单由于考虑是多级的,所以我们需要封装成一个组件,并且需要使用组件的递归调用自身已实现多级。
父组件
在父组件中,我们可以使用这种形式来记录菜单数据。
封装组件 Item
Item 是一个菜单的每一个小项。他接受来自父组件的 items 数组,然后使用 v-for 渲染每一个子菜单(不是一级菜单,是多级菜单的递归渲染)。在父组件中,也通过 v-for 渲染一级菜单。
子菜单中判断是否活跃一样是通过上级的
activeItem
是否等于 this.index
父组件调用组件
CSS 样式
以上步骤已经实现了对菜单加入和取消 CSS类
active
和 hide
。接下来就只要写这两个样式就行了。
这里就不说了,菜单的收缩可以使用
max-height
属性。难点二 路由
到这,我已经查了很多文章,也想了很久,可能是我比较笨吧,一直没想出来。
最后,我想到了点击菜单时,先判断是不是尾菜单,就是不含子菜单的菜单,不可再下拉。
如果是,就合并上一级菜单的
path
,(注意看前面的 path
那么只要在
handleClick
的时候加一层判断和跳转就行了。最后贴一张想了很久画了很久的手稿,字丑勿喷。


完整代码
文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...