From 86096e4eabd6e442aef626db5e1a336504821e51 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 24 Nov 2017 16:30:40 +0800 Subject: [PATCH] refactor:router&&sidemenu --- src/components/Breadcrumb/index.vue | 34 +++--- src/components/ScrollBar/index.vue | 56 ++++++++++ src/router/index.js | 46 +++++--- src/styles/index.scss | 4 +- src/styles/sidebar.scss | 100 ++++++++++++++++++ src/styles/variables.scss | 4 + src/views/layout/Layout.vue | 60 ++--------- src/views/layout/components/Navbar.vue | 81 +++++++------- .../layout/components/Sidebar/SidebarItem.vue | 39 ++++--- src/views/layout/components/Sidebar/index.vue | 25 +++-- 10 files changed, 290 insertions(+), 159 deletions(-) create mode 100644 src/components/ScrollBar/index.vue create mode 100644 src/styles/sidebar.scss create mode 100644 src/styles/variables.scss diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 2264ac9..5864163 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -1,11 +1,11 @@ @@ -23,8 +23,8 @@ export default { getBreadcrumb() { let matched = this.$route.matched.filter(item => item.name) const first = matched[0] - if (first && (first.name !== 'Home' || first.path !== '')) { - matched = [{ name: 'Home', path: '/' }].concat(matched) + if (first && first.name !== 'dashboard') { + matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched) } this.levelList = matched } @@ -38,14 +38,14 @@ export default { diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue new file mode 100644 index 0000000..00e8129 --- /dev/null +++ b/src/components/ScrollBar/index.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/router/index.js b/src/router/index.js index 99c6b84..c6b171e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,19 +1,23 @@ import Vue from 'vue' import Router from 'vue-router' const _import = require('./_import_' + process.env.NODE_ENV) -// in development env not use Lazy Loading,because Lazy Loading too many pages will cause webpack hot update too slow.so only in production use Lazy Loading - -/* layout */ -import Layout from '../views/layout/Layout' +// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading; +// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading Vue.use(Router) +/* Layout */ +import Layout from '../views/layout/Layout' + /** -* icon : the icon show in the sidebar -* hidden : if `hidden:true` will not show in the sidebar -* redirect : if `redirect:noredirect` will not redirct in the levelbar -* noDropdown : if `noDropdown:true` will not has submenu in the sidebar -* meta : `{ role: ['admin'] }` will control the page role +* hidden: true if `hidden:true` will not show in the sidebar(default is false) +* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb +* name:'router-name' the name is used by (must set!!!) +* meta : { + role: ['admin','editor'] will control the page role (you can set multiple roles) + title: 'title' the name show in submenu and breadcrumb (recommend set) + icon: 'svg-name' the icon show in the sidebar, + } **/ export const constantRouterMap = [ { path: '/login', component: _import('login/index'), hidden: true }, @@ -24,7 +28,11 @@ export const constantRouterMap = [ redirect: '/dashboard', name: 'Dashboard', hidden: true, - children: [{ path: 'dashboard', component: _import('dashboard/index') }] + children: [{ + path: 'dashboard', + component: _import('dashboard/index'), + meta: { title: 'dashboard', icon: 'dashboard' } + }] }, { @@ -32,9 +40,14 @@ export const constantRouterMap = [ component: Layout, redirect: 'noredirect', name: 'Example', - icon: 'example', + meta: { title: 'Example', icon: 'example' }, children: [ - { path: 'index', name: 'Form', icon: 'form', component: _import('page/form') } + { + path: 'index', + name: 'Form', + component: _import('page/form'), + meta: { title: 'Form', icon: 'form' } + } ] }, @@ -42,9 +55,12 @@ export const constantRouterMap = [ path: '/table', component: Layout, redirect: '/table/index', - icon: 'table', - noDropdown: true, - children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['admin'] }}] + children: [{ + path: 'index', + name: 'Table', + component: _import('table/index'), + meta: { title: 'Table', icon: 'table', role: ['admin'] }} + ] }, { path: '*', redirect: '/404', hidden: true } diff --git a/src/styles/index.scss b/src/styles/index.scss index 67d2d8b..7ab8db8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,8 @@ -@import './element-ui.scss'; +@import './variables.scss'; @import './mixin.scss'; @import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; body { -moz-osx-font-smoothing: grayscale; diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss new file mode 100644 index 0000000..2fed2b1 --- /dev/null +++ b/src/styles/sidebar.scss @@ -0,0 +1,100 @@ +#app { + // 主体区域 + .main-container { + min-height: 100%; + transition: margin-left 0.28s; + margin-left: 180px; + } // 侧边栏 + .sidebar-container { + transition: width 0.28s; + width: 180px!important; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + a { + display: inline-block; + width: 100%; + } + .svg-icon { + margin-right: 16px; + } + .el-menu { + border: none; + width: 100%; + } + } + .hideSidebar { + .sidebar-container,.sidebar-container .el-menu { + width: 36px!important; + // overflow: inherit; + } + .main-container { + margin-left: 36px; + } + } + .hideSidebar { + .submenu-title-noDropdown { + padding-left: 10px!important; + position: relative; + span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + transition: opacity .3s cubic-bezier(.55, 0, .1, 1); + opacity: 0; + display: inline-block; + } + &:hover { + span { + display: block; + border-radius: 3px; + z-index: 1002; + width: 140px; + height: 56px; + visibility: visible; + position: absolute; + right: -145px; + text-align: left; + text-indent: 20px; + top: 0px; + background-color: $subMenuBg!important; + opacity: 1; + } + } + } + .el-submenu { + &>.el-submenu__title { + padding-left: 10px!important; + &>span { + display: none; + } + .el-submenu__icon-arrow { + display: none; + } + } + .nest-menu { + .el-submenu__icon-arrow { + display: block!important; + } + span { + display: inline-block!important; + } + } + } + } + .nest-menu .el-submenu>.el-submenu__title, + .el-submenu .el-menu-item { + min-width: 180px!important; + background-color: $subMenuBg!important; + &:hover { + background-color: $menuHover!important; + } + } + .el-menu--collapse .el-menu .el-submenu{ + min-width: 180px!important; + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..2fee827 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,4 @@ +//sidebar +$menuBg:#304156; +$subMenuBg:#1f2d3d; +$menuHover:#001528; diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index 567cc58..dcdd549 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -1,8 +1,6 @@ - diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index 2843a15..8233bc5 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -51,49 +51,44 @@ export default { diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue index ca80e9b..82324a1 100644 --- a/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/src/views/layout/components/Sidebar/SidebarItem.vue @@ -1,24 +1,32 @@