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

perf[Sidebar]: optimize logic

This commit is contained in:
Pan 2019-02-28 13:52:11 +08:00
parent be61e7025b
commit 5bfadbc118
2 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/layout/components/Sidebar/Item.vue
View File

@ -3,17 +3,18 @@ export default {
name: 'MenuItem', name: 'MenuItem',
functional: true, functional: true,
props: { props: {
icon: { meta: {
type: String, type: Object,
default: '' default: () => {
}, return {
title: { title: '',
type: String, icon: ''
default: '' }
}
} }
}, },
render(h, context) { render(h, context) {
const { icon, title } = context.props const { icon, title } = context.props.meta
const vnodes = [] const vnodes = []
if (icon) { if (icon) {

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

@ -1,33 +1,25 @@
<template> <template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper"> <div v-if="!item.hidden" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link :to="resolvePath(onlyOneChild.path)"> <app-link :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" /> <item :meta="Object.assign({},item.meta,onlyOneChild.meta)" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else :index="resolvePath(item.path)"> <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)">
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" /> <item :meta="item.meta" />
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item
v-if="child.children&&child.children.length>0"
:is-nest="true"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu" />
<app-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
</el-menu-item>
</app-link>
</template> </template>
<sidebar-item
v-for="child in item.children"
:is-nest="true"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu" />
</el-submenu> </el-submenu>
</div> </div>
@ -64,7 +56,7 @@ export default {
return {} return {}
}, },
methods: { methods: {
hasOneShowingChild(children, parent) { hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {
if (item.hidden) { if (item.hidden) {
return false return false
@ -89,13 +81,10 @@ export default {
return false return false
}, },
resolvePath(routePath) { resolvePath(routePath) {
if (this.isExternalLink(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
return path.resolve(this.basePath, routePath) return path.resolve(this.basePath, routePath)
},
isExternalLink(routePath) {
return isExternal(routePath)
} }
} }
} }