当前位置：首页 > news >正文

iView Admin的side menu改为top menu

news 来源：原创 2025/7/2 22:03:47

和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如下。

<template><div class="header-bar"><sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger><custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb><div class="custom-content-con"><slot></slot></div></div>
</template>

可以看到这个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

<template><Dropdown ref="dropdown" @on-click="handleClick"><a href="javascript:void(0)"><Icon type="md-menu" size="26"></Icon></a><DropdownMenu slot="list"><template v-for="item in menuList"><DropdownItem v-if="!showChildren(item) && (!item.meta || (item.meta && !item.meta.hideInMenu))":name="getNameOrHref(item,true)">{{showTitle(item)}}</DropdownItem><Dropdown v-if="showChildren(item) && (!item.meta || (item.meta && !item.meta.hideInMenu))" :placement="placement"><DropdownItem>{{showTitle(item)}}<Icon type="ios-arrow-forward"></Icon></DropdownItem><DropdownMenu slot="list"><DropdownItem v-for ="subItem in item.children"v-if=" !subItem.meta || (subItem.meta && !subItem.meta.hideInMenu)" :name="getNameOrHref(subItem)">{{showTitle(subItem)}}</DropdownItem></DropdownMenu></Dropdown></template></DropdownMenu></Dropdown>
</template>

此外该组件里还需要增加一个用于判断该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部分如下：

<template><div class="header-bar"><CollapsedMenu :menuList="menuList" @on-click="handleSelect"/><custom-bread-crumb show-icon  :list="breadCrumbList"></custom-bread-crumb><div class="custom-content-con"><slot></slot></div></div>
</template>

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

<Header class="header-con"><header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange" :menu-list="menuList" @on-select="turnToPage"><user :user-avator="userAvator" :userName="userName"/><language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/><error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store><fullscreen v-model="isFullscreen" style="margin-right: 10px;"/></header-bar></Header>

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

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

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

相关文章：