zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(SidebarItem): optimizate SidebarItem (#845)

Browse Source 
* refactor(sidebar-item): optimizate SiderbarItem.

* chore: update nested examples.

* fix: fix a wrong path.

* fix: fix a transition bug.

* fix: fix a wrong path.

* perf: using "router" mode of el-menu.

* Revert "perf: using "router" mode of el-menu."

This reverts commit cef02a30b0.

* fix: complement i18n text.
This commit is contained in:
博文
2018-07-13 11:23:06 +08:00
committed by 花裤衩
parent 77cb6b1f43
commit aa7eab58f9
16 changed files with 113 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
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">{{generateTitle(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">{{generateTitle(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">{{generateTitle(child.meta.title)}}</span>
</el-menu-item>
@@ -28,22 +26,27 @@
</template>
</el-submenu>
</template>
</div>
</template>
<script>
import path from 'path'
import { generateTitle } from '@/utils/i18n'
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array
item: { // route配置json
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
methods: {
@@ -56,6 +59,9 @@ export default {
}
return false
},
resolvePath(...paths) {
return path.resolve(this.basePath, ...paths)
},
generateTitle
}
}

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

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

7
src/views/nested/bar/index.vue
View File

@@ -1,7 +0,0 @@
<template>
<div class="app-container">
<code>Parent View: Bar</code>
<img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png">
<router-view></router-view>
</div>
</template>

6
src/views/nested/bar/posts.vue
View File

@@ -1,6 +0,0 @@
<template>
<div style="margin-top:30px;">
<el-alert title="Children: Posts" type="warning" :closable="false">
</el-alert>
</div>
</template>

6
src/views/nested/bar/profile.vue
View File

@@ -1,6 +0,0 @@
<template>
<div style="margin-top:30px;">
<el-alert title="Children: Profile" type="success" :closable="false">
</el-alert>
</div>
</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>