liyanhong
/
jinjianback1.1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor sidebar && add nested demo

This commit is contained in:
Pan 2018-07-13 15:02:42 +08:00
parent 3fd9a8465e
commit 69eb3ed513
11 changed files with 121 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/icons/svg/nested.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1529559567446" class="icon" style="" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.9296875" height="200"><defs><style type="text/css"></style></defs><path d="M0.015952 74.459413A2.286 2.286 1440 1 0 145.85218 74.459413 2.286 2.286 1440 1 0 0.015952 74.459413zM291.720312 1.525347 1166.801488 1.525347 1166.801488 147.361574 291.720312 147.361574zM291.720312 366.163773A2.286 2.286 1440 1 0 437.55654 366.163773 2.286 2.286 1440 1 0 291.720312 366.163773zM583.424672 293.229707 1166.801488 293.229707 1166.801488 439.065934 583.424672 439.065934zM291.720312 949.540588A2.286 2.286 1440 1 0 437.55654 949.540588 2.286 2.286 1440 1 0 291.720312 949.540588zM583.424672 876.638427 1166.801488 876.638427 1166.801488 1022.474654 583.424672 1022.474654zM583.424672 657.836228A2.286 2.286 1440 1 0 729.2609 657.836228 2.286 2.286 1440 1 0 583.424672 657.836228zM875.129032 584.934067 1166.801488 584.934067 1166.801488 730.770294 875.129032 730.770294z" p-id="1768"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

58
src/router/index.js
View File

@ -72,6 +72,64 @@ export const constantRouterMap = [
]
},
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
name: 'nested',
meta: {
title: 'nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'menu1',
meta: { title: 'menu1' },
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'menu1-1',
meta: { title: 'menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'menu1-2',
meta: { title: 'menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'menu1-2-1',
meta: { title: 'menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'menu1-2-2',
meta: { title: 'menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'menu1-3',
meta: { title: 'menu1-3' }
}
]
},
{
path: 'menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]

32
src/views/layout/components/Sidebar/SidebarItem.vue
View File

@ -1,26 +1,24 @@
<template>
<div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
:key="item.children[0].name">
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
<el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
</el-menu-item>
</router-link>
<el-submenu v-else :index="item.name||item.path" :key="item.name">
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
</el-menu-item>
@ -28,20 +26,27 @@
</template>
</el-submenu>
</template>
</div>
</template>
<script>
import path from 'path'
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
// route配置json
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
methods: {
@ -53,6 +58,9 @@ export default {
return true
}
return false
},
resolvePath(...paths) {
return path.resolve(this.basePath, ...paths)
}
}
}

2
src/views/layout/components/Sidebar/index.vue
View File

@ -9,7 +9,7 @@
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<sidebar-item :routes="routes"></sidebar-item>
<sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
</el-menu>
</el-scrollbar>
</template>

7
src/views/nested/menu1/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template >
<div style="padding:30px;">
<el-alert title="menu 1" :closable="false">
<router-view />
</el-alert>
</div>
</template>

7
src/views/nested/menu1/menu1-1/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template >
<div style="padding:30px;">
<el-alert title="menu 1-1" type="success" :closable="false">
<router-view />
</el-alert>
</div>
</template>

7
src/views/nested/menu1/menu1-2/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div style="padding:30px;">
<el-alert title="menu 1-2" type="success" :closable="false">
<router-view />
</el-alert>
</div>
</template>

5
src/views/nested/menu1/menu1-2/menu1-2-1/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template functional>
<div style="padding:30px;">
<el-alert title="menu 1-2-1" type="warning" :closable="false" />
</div>
</template>

5
src/views/nested/menu1/menu1-2/menu1-2-2/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template functional>
<div style="padding:30px;">
<el-alert title="menu 1-2-2" type="warning" :closable="false" />
</div>
</template>

5
src/views/nested/menu1/menu1-3/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template functional>
<div style="padding:30px;">
<el-alert title="menu 1-3" type="success" :closable="false" />
</div>
</template>

5
src/views/nested/menu2/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div style="padding:30px;">
<el-alert title="menu 2" :closable="false" />
</div>
</template>