基于vue-element-admin实现的可切换至顶部菜单栏

https://panjiachen.gitee.io/vue-element-admin/#
我们基于vue-element-admin框架可看出官网只支持侧边菜单栏样式，而系统开发时要求基于顶部菜单栏的样式，这个时候就需要进行改造一番。
1.@/styles/sidebar.scss 修改.hideSidebar 的样式

.hideSidebar {.sidebar-container {width: $hideSidebar !important;  //默认54px，收起时会展示图标，因此我们设为0}.main-container {margin-left:  $hideSidebar;  //默认54px，收起时会留出 54px 的空白，因此我们设为0}.submenu-title-noDropdown {padding: 0 !important;position: relative;.el-tooltip {padding: 0 !important;.svg-icon {margin-left:  $hideSidebarSvg;}}}// .sidebar-container {//     width: 54px !important;// }// .main-container {//     margin-left: 54px;// }// .submenu-title-noDropdown {//     padding: 0 !important;//     position: relative;//     .el-tooltip {//         padding: 0 !important;//         .svg-icon {//             margin-left: 20px;//         }//     }// }.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;}}}}}

2.复制一份@/views/layout/Sidebar 组件，粘贴到相同路径下，更改组件名为HeadNavbar

在index.js中声明组件

@/views/layout/HeadNavbar/index.vue 将template修改如下：

@/views/layout/HeadNavbar/SidebarItem.vue 将template修改如下：

"subMenu" :index="resolvePath(item.path)" popper-append-to-body >

/views/layout/HeadNavbar/VerticalItem.vue 顶部导航栏不需要显示图标，将template修改如下：

完成以上步骤以后顶部导航栏的组件就改造好了，只需要在index.vue 下引入就可以使用

```import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import { getSystemSetting} from '@/api/user/systemSetting'
//import {getAreaCode} from '@/api/baseManager/sourceDevice'
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Sidebar, TagsView,HeadNavbar } from './components'
import settingStyle from './components/Settings'
export default {name: 'Layout',components: {AppMain,Navbar,RightPanel,settingStyle,Sidebar,HeadNavbar,TagsView},mixins: [ResizeMixin],computed: {...mapState({sidebar: state => state.app.sidebar,device: state => state.app.device,showSettings: state => state.settings.showSettings,needTagsView: state => state.settings.tagsView,fixedHeader: state => state.settings.fixedHeader,meunStyle: state => state.settings.meunStyle,theme: state => state.settings.theme,}),classObj() {return {hideSidebar: !this.sidebar.opened,openSidebar: this.sidebar.opened,withoutAnimation: this.sidebar.withoutAnimation,mobile: this.device === 'mobile'}}},data(){return {// HoStyle:this.$store.state.settings.meunStyle==true?"margin-left:210px;":"margin-left:0px;",//根据是否显示顶部菜单栏，判断是否空置出左边菜单位置areaCode:null,mapurl:null,coordinate:null,listQuery:{areaCode:undefined,areaType:undefined},}},created(){this.getSystem();},此处的${theme}是取的默认主题色，在
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828164343888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU4MjgwNA==,size_16,color_FFFFFF,t_70#pic_center)
通过![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828164400276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU4MjgwNA==,size_16,color_FFFFFF,t_70#pic_center)
这里定义，即可全局取到 theme: state => state.settings.theme,
我的实现是可以在设置里进行切换显示到底是顶部菜单显示还是侧边显示。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！