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

View File

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

View File

@ -1,33 +1,25 @@
<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">
<app-link :to="resolvePath(onlyOneChild.path)">
<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>
</app-link>
</template>
<el-submenu v-else :index="resolvePath(item.path)">
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)">
<template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</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>
<item :meta="item.meta" />
</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>
</div>
@ -64,7 +56,7 @@ export default {
return {}
},
methods: {
hasOneShowingChild(children, parent) {
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
@ -89,13 +81,10 @@ export default {
return false
},
resolvePath(routePath) {
if (this.isExternalLink(routePath)) {
if (isExternal(routePath)) {
return routePath
}
return path.resolve(this.basePath, routePath)
},
isExternalLink(routePath) {
return isExternal(routePath)
}
}
}