vue2+vuecli3+elementUI后台管理系列之sidebar导航的开发(五)

我们接着来实现sidebar的导航菜单布局效果

改造src/layout/components/Sidebar/index.vue

<template><div><logo :collapse="isCollapse" /><el-scrollbar wrap-class="scrollbar-wrapper"><el-menudefault-active="1-4-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-scrollbar></div>
</template>

终于有点像那么回事了！继续进行优化

src/store/modules/permission.js

import { constantRouterMap } from '@/router/'
import Layout from '@/layout/index'const permission = {state: {routers: constantRouterMap,addRouters: []},mutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.routers = constantRouterMap.concat(routers)}},actions: {GenerateRoutes({ commit }, asyncRouter) {commit('SET_ROUTERS', asyncRouter)}}
}export default permission

src/router/index.js

const constantRouterMap = [...]
const router = new VueRouter({mode: 'hash',routes: constantRouterMap
})

重点来了，这里我们siderbar需要做组件化的封装

<el-menu:default-active="activeMenu":collapse="isCollapse":background-color="variables.menuBg":text-color="variables.menuText":unique-opened="$store.state.settings.uniqueOpened":active-text-color="variables.menuActiveText":collapse-transition="false"mode="vertical"><sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" /></el-menu>

经过一系列的改造后，实现了左边的切换显示

至此，我们的后台系统效果就基本实现了!以后就是对立面的功能进行具体的细节的实现了。接下来继续朝我们的美化样式开发!

sidebar.scss

#app {.main-container {min-height: 100%;transition: margin-left 0.28s;margin-left: $sideBarWidth;position: relative;}.sidebar-container {transition: width 0.28s;width: $sideBarWidth !important;background-color: $menuBg;height: 100%;position: fixed;font-size: 0;top: 0;bottom: 0;left: 0;z-index: 1001;overflow: hidden;// reset element-ui css.horizontal-collapse-transition {transition: 0s width ease-in-out, 0s padding-left ease-in-out,0s padding-right ease-in-out;}.scrollbar-wrapper {overflow-x: hidden !important;}.el-scrollbar__bar.is-vertical {right: 0;}.el-scrollbar {height: 100%;}&.has-logo {.el-scrollbar {height: calc(100% - 50px);}}.is-horizontal {display: none;}a {display: inline-block;width: 100%;overflow: hidden;}.svg-icon {margin-right: 16px;}.el-menu {border: none;height: 100%;width: 100% !important;}// menu hover.submenu-title-noDropdown,.el-submenu__title {&:hover {background-color: $menuHover !important;}}.is-active > .el-submenu__title {color: $subMenuActiveText !important;}& .nest-menu .el-submenu > .el-submenu__title,& .el-submenu .el-menu-item {min-width: $sideBarWidth !important;background-color: $subMenuBg !important;&:hover {background-color: $subMenuHover !important;}}}.hideSidebar {.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;}}}}}.el-menu--collapse .el-menu .el-submenu {min-width: $sideBarWidth !important;}// mobile responsive.mobile {.main-container {margin-left: 0;}.sidebar-container {transition: transform 0.28s;width: $sideBarWidth !important;}&.hideSidebar {.sidebar-container {pointer-events: none;transition-duration: 0.3s;transform: translate3d(-$sideBarWidth, 0, 0);}}}.withoutAnimation {.main-container,.sidebar-container {transition: none;}}
}// when menu collapsed
.el-menu--vertical {& > .el-menu {.svg-icon {margin-right: 16px;}}.nest-menu .el-submenu > .el-submenu__title,.el-menu-item {&:hover {// you can use $subMenuHoverbackground-color: $menuHover !important;}}// the scroll bar appears when the subMenu is too long> .el-menu--popup {max-height: 100vh;overflow-y: auto;&::-webkit-scrollbar-track-piece {background: #d3dce6;}&::-webkit-scrollbar {width: 6px;}&::-webkit-scrollbar-thumb {background: #99a9bf;border-radius: 20px;}}
}

src/assets/styles/index.scss

@import 'variables';
@import 'mixin';
@import 'sidebar';

这里要提下的就是svg-icon实现

自己封装成一个组件,全局注册在main.js引入

...
// 注册svg图标
import './assets/icons'
...

然后

yarn add svg-sprite-loader

vue.config.js

chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}

这样配置图标就生效了

最后的sidebar效果

继续配置不同的路由显示同的页面内容
src/layout/components/AppMain/index.vue

<template><section class="app-main"><router-view></router-view></section>
</template><script>
export default {}
</script><style lang="scss" scoped></style>

至此不出意外的话，就会得到下面的效果:

这样我们的左侧导航效果就实现了!
src/layout/components/Navbar/index.vue

<template><div class="navbar"><Hamburgerid="hamburger-container":is-active="sidebar.opened"class="hamburger-container"@toggleClick="toggleSideBar"/><breadcrumb id="breadcrumb-container" class="breadcrumb-container" /></div>
</template><script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@comps/Hamburger'
export default {computed: {...mapGetters(['sidebar'])},components: {Hamburger,Breadcrumb},methods: {toggleSideBar() {this.$store.dispatch('app/toggleSideBar')}}
}
</script><style lang="scss" scoped>
.navbar {height: 50px;overflow: hidden;line-height: 50px;position: relative;background: #fff;box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);.hamburger-container {line-height: 46px;height: 100%;float: left;cursor: pointer;transition: background 0.3s;-webkit-tap-highlight-color: transparent;&:hover {background: rgba(0, 0, 0, 0.025);}.breadcrumb-container {float: left;}}
}
</style>

进行相关的配置,把面包屑导航实现出来

至此整个sidebar导航就实现了！下一节我们优化下面包屑导航，然后再实现tab标签导航的功能！

vue2+vuecli3+elementUI后台管理系列之sidebar导航的开发(五)相关推荐

基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
elementui后台管理demo
elementui后台管理demo 第一次尝试做后台管理的框架,做的时候也有想过用别的demo,后来想一想还是算了,虽然网上很多,但是还是自己写出来的有意义,虽然有很多不足,但是是自己写的,自己知根知 ...
vue+elementUI 后台管理极简模板
vue+elementUI 后台管理极简模板写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建好了一个后台管理系统的基础框架,教你如何在此基础上快速开 ...
Vue2+elementUi后台管理项目总结
前言该项目是一款对公司员工及商品管理的后台系统,主要实现功能:公司角色的增删改查,和商品的增删改查,项目的主要模块有,登录,主页,员工管理,权限管理,商品管理,该项目的亮点是权限管理,不同角色登录进 ...
带工作流的springboot后台管理项目，一个企业级快速开发解决方案
后台管理类项目项目名称: JeeSite 项目介绍: 这是个典型的SSM后台管理项目(不是有很多小伙伴让推荐SSM项目练手嘛),基于经典技术组合(Spring MVC.Shiro.MyBatis.B ...
从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建
文章目录前言一.全局安装vue-cli 二.创建vue项目 1.用命令来创建vue项目三.运行项目 1.项目目录解读一.项目全局引入element ui 总结写文初衷前言在开始之前,首先 ...
Deming管理系列（2）——怎样开发度量能力
问题: 一个公司为了做好软件开发,产品,服务或者销售或许有非常多的度量(比如:进度.工作量,缺陷).然而.很多度量对于提高产品质量,生产率或客户惬意度并不充分和有帮助.那么,怎样制定度量和分析的目标以 ...
疯狂.NET架构通用权限后台管理工具演示版2.0下载
程序未必是最好的,但是我目前所能拥有的程序里是最好的, 功能未必是最全的,但是我目前所能拥有的程序里是最好的. 不管我的再怎么不好,也有成熟的产品,商品化的成果物,请不要乱打击我,你有实力就把你的拿出 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...

vue2+vuecli3+elementUI后台管理系列之sidebar导航的开发(五)

vue2+vuecli3+elementUI后台管理系列之sidebar导航的开发(五)相关推荐

最新文章

热门文章