vue-element-admin⽣成顶部导航栏解决⽅案
背景
项⽬需要基于 开发，vue-element-admin主要定位是中后台管理系统，⽽项⽬⼜偏向前中台，因此想使⽤顶部导航栏的⽅式。原本以为很简单，不就是将 导航栏组件 mode设为 horizontal 就可以了吗，naive~ 排查了⼀下代码（和官⽂），发现 ：
这⾥同时也改造了 element-ui 默认侧边栏不少的样式，所有的 css 都可以在 @/styles/sidebar.scss 中到，你也可以根据⾃⼰的需求进⾏修改。
问题
在收起侧边栏的时候，顶部导航栏样式出现问题（此处⽆图，⼤概就是有⼦⽬录的节点标题之间的距离没有了）。
期望的效果
不改变导航栏与路由绑定的效果，把侧边栏变成顶部导航栏。
当然也可以同时保留两种⽅式：
解决办法
步骤⼀
@/styles/sidebar.scss 修改.hideSidebar 的样式
.
hideSidebar {
.sidebar-container {
width:0!important;//默认54px，收起时会展⽰图标，因此我们设为0
}
.main-container {
margin-left:0;//默认54px，收起时会留出 54px 的空⽩，因此我们设为0
}
.submenu-title-noDropdown {
padding:0!important;
position: relative;
.el-tooltip {
padding:0!important;
.svg-icon {
margin-left:20px;
}
}
}
/* 注释掉.hideSidebar的⼦样式.el-submenu，避免submenu样式失灵，原因很简单，就是这段代码会导致标题之间距离从原本的20px变成0*/ /* .el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}*/
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height:0;
width:0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
步骤⼆
复制⼀份@/views/layout/Sidebar 组件，粘贴到相同路径下，更改组件名为HeadNavbar
在index.js中声明组件
@/views/layout/HeadNavbar/index.vue 将template修改如下：
<template>
<el-menu
:default-active="activeMenu"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<sidebar-item v-for="route in permission_routes":key="route.path":item="route":base-path="route.path"/> </el-menu>
</template>
@/views/layout/HeadNavbar/SidebarItem.vue 将template修改如下：
<template>
<!-- style设置为inline-block，避免标题垂直布局-->
<div v-if="!item.hidden" >
<template
v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||ShowingChildren)&&!item.alwaysShow"> <app-link v-if="a":to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<item :title="a.title"/>
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu":index="resolvePath(item.path)" popper-append-to-body >
<template slot="title">
<item v-if="a":title="a.title"/>
<!--增加固定宽度解决箭头被遮挡的问题-->
<div ></div>
</template>
<vertical-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:
item="child"
:base-path="resolvePath(child.path)"
/>
</el-submenu>
</div>
</template>
@/views/layout/HeadNavbar/VerticalItem.vue 顶部导航栏不需要显⽰图标，将template修改如下：
<template>
<div v-if="!item.hidden">
<template
v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||Showing
Children)&&!item.alwaysShow"> <app-link v-if="a":to="resolvePath(onlyOneChild.path)">vue element admin
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<item :title="a.title"/>
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu":index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="a":title="a.title"/>
</template>
<vertical-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
/>
</el-submenu>
</div>
</template>
步骤三
完成以上步骤以后顶部导航栏的组件就改造好了，只需要在index.vue 下引⼊就可以使⽤。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论