iView Admin的side menu改为top menu

和iView Admin结缘于某次在“顾问群”里问，“有什么开源前端框架推荐吗？”。群里一位老开发答，“试试iView Admin”。于是我就试了试，发现很好用，对新手也很友好，试过撸一个管理后台的前端用了4天，感觉效率还可以。
最近需要定制“无侧滑菜单，改用顶部下拉菜单”的效果，所以开始分析下源码。
看/src/router/router.js里原始定义的路由，可以看到首页路由使用的component是Main。

image.png

然后我们打开component/main.vue来查看，如下图。可以看到main.vue相当于一个大框架底层页面，页面结构可以简单分为Sider(左侧展开的菜单)、Header（顶部）以及Content（主要内容区）。把Sider注释或者删除，就相当于实现了“无侧滑菜单”的效果。然后看下Header里的组件，分别有HeaderBar、user、language、error-store、fullscreen，看来这个headerbar就是我们可以添加“下拉菜单”的地方了。

image.png

原来的header-bar.vue如下。

可以看到这个HeaderBar里有两个组件，一个是点击一下就触发左侧菜单弹出、并且自身Icon发生旋转的sider-trigger，另一个就是自定义的面包屑导航custom-bread-crumb。于是想到，把这里的sider-trigger替换成我们即将写好的下拉菜单组件，传入菜单数据以及对下拉菜单的点击事件进行捕捉后，调用原来的gotoPage的方法，应该就能满足需求了。
我们先去写下拉菜单组件collapse-menu.vue。根据iView Admin原来的route元组的构成方式，使用DropdownMenu组件来展示不同层级的菜单。showTitle是根据当前route元组中的name以及当前locale显示出对应的文字，最后完成的collase-menu的template部分如下：
collapse-menu.vue

此外该组件里还需要增加一个用于判断该route元组是使用vue页面还是外部页面，如果是外部页面，则往上回传的应该是带有标记的外部url， 这样在main.vue里的turnToPage的方法，就可以直接使用组件事件回传的参数进行跳转。关键代码如下：

getNameOrHref (item,children0) {
     return item.href ? `isTurnByHref_${item.href}` : (children0 ? item.children[0].name : item.name)
    },

然后，就可以在Header-bar.vue里直接引用新做好的下拉菜单组件了。header-bar.vue中的template部分如下：

然后在main.vue里，将所需的菜单数据传给header-bar，再由header-bar依次传递。
main.vue

最后总结下本次实现过程中父子组件间涉及到的通信:
1.父组件往子组件传数据，用的是props这个单向数据流的方式，将menuList传到最终的子组件。
2.子组件往父组件传值,用的是$emit,将子组件里click/change事件触发时的值，会传到父组件。

最后编辑于：2025-04-21 10:54:09

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！