1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
<div v-if="!item.hidden" class="menu-wrapper">
<template
v-if="
hasOneShowingChild(item.children, item) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
!item.alwaysShow
"
>
<app-link
v-if="onlyOneChild.meta"
:to="
resolvePath(
onlyOneChild.path +
(onlyOneChild.meta.querys ? '?' + onlyOneChild.meta.querys : '')
)
"
>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
>
<icon-item
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
:title="onlyOneChild.meta.title"
/>
</el-menu-item>
</app-link>
</template>
<template v-else>
<el-submenu id="subid" ref="subMenu" :index="resolvePath(item.path)">
<template slot="title">
<icon-item
v-if="item.meta"
:icon="item.meta && item.meta.icon"
:title="item.meta.title||item.menuName"
/>
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</template>
</div>
</template>
<script>
import path from "path";
import { isExternal } from "@/utils/validate";
import IconItem from "./Item.vue";
import AppLink from "./Link";
export default {
name: "SidebarItem",
components: { IconItem, AppLink },
props: {
// route object
item: {
type: Object,
required: true,
},
isNest: {
type: Boolean,
default: false,
},
basePath: {
type: String,
default: "",
},
},
data() {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null;
return {};
},
mounted() {},
methods: {
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter((item) => {
if (item.hidden) {
return false;
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item;
return true;
}
});
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true;
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
return true;
}
return false;
},
resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath;
}
if (isExternal(this.basePath)) {
return this.basePath;
}
return path.resolve(this.basePath, routePath);
},
},
};
</script>
<style lang="scss" scoped>
.menu-wrapper {
&:focus {
outline: none;
}
a {
text-decoration: none;
color: inherit;
display: inline-block;
width: 100%;
}
}
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
min-width: 120px !important;
}
.el-menu .el-menu--popup .el-menu--popup-bottom-start ::v-deep {
width: 1020px;
}
</style>