e5b57447
 杨鑫
'分包问卷'
|
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
|
<template>
<div v-if="!item.hidden">
<template
v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"
>
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{'submenu-title-noDropdown':!isNest}"
>
<item
:icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
:title="onlyOneChild.meta.title"
/>
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="(child,index) in item.children"
:key="index"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
export default {
|
d64cd58f
 wesley88
上传验收小程序
|
45
|
name: 'SidebarItem',
|
|
e5b57447
杨鑫
'分包问卷'
|
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
components: { Item, AppLink },
mixins: [FixiOSBug],
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
|
|
d64cd58f
wesley88
上传验收小程序
|
63
|
data () {
|
|
e5b57447
杨鑫
'分包问卷'
|
64
65
66
67
68
|
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
|
|
d64cd58f
wesley88
上传验收小程序
|
69
70
71
72
73
|
watch: {
item: (n, o) => {
console.log('sidebaritem child', n)
}
},
|
|
e5b57447
杨鑫
'分包问卷'
|
74
|
methods: {
|
|
d64cd58f
wesley88
上传验收小程序
|
75
|
hasOneShowingChild (children = [], parent) {
|
|
e5b57447
杨鑫
'分包问卷'
|
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
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
},
|
|
d64cd58f
wesley88
上传验收小程序
|
99
|
resolvePath (routePath) {
|
|
e5b57447
杨鑫
'分包问卷'
|
100
|
if (isExternal(routePath)) {
|
|
e5b57447
杨鑫
'分包问卷'
|
101
102
103
|
return routePath
}
if (isExternal(this.basePath)) {
|
|
e5b57447
杨鑫
'分包问卷'
|
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
}
</script>
<style lang="less">
.el-submenu{
// padding:4px 12px;
}
.el-submenu .el-submenu__title{
padding-left:29px !important;
}
//设置鼠标悬停时el-submenu的样式
.el-submenu .el-submenu__title:hover{
background-color: #3f9b6a1a !important;
border-radius:4px;
color: #3F9B6A !important;
}
</style>
<style lang="scss" scoped>
.tabLink:last-of-type {
height: 200px;
}
.el-submenu__icon-arrow{
right:20px;
}
.el-menu-item.is-active {
background-color: #3F9B6A !important;
color: #fff !important;
border-radius:4px;
margin: 0 12px 6px;
}
.el-menu-item.is-active:hover{
background-color: #3F9B6A !important;
border-radius:4px;
color: #fff !important;
//less语法，实现鼠标悬停时icon变色
}
.el-menu-item{
padding:0px 20px 0 40px !important;
margin:5px 0;
border-radius:4px;
border: 1px solid transparent;
margin: 0 12px 6px;
color:#525050 !important;
}
::v-deep .el-submenu__title{
font-weight:600;
}
.el-menu-item:hover{
background-color: #DEEBE2 !important;
border-radius:4px;
color: #3F9B6A !important;
//less语法，实现鼠标悬停时icon变色
}
.tabLink{
font-weight:500;
}
::v-deep .el-menu-item{
height:36px;
line-height:31px;
}
::v-deep .el-submenu__title{
height:36px;
line-height:32px;
}
::v-deep .el-submenu{
// padding:0 10px !important;
}
::v-deep .el-submenu__title{
.sub-el-icon {
display: none;
}
}
::v-deep .el-submenu__title{
.svg-icon {
display: none;
}
}
::v-deep .el-menu-item{
.sub-el-icon {
display: none;
}
}
::v-deep .el-menu-item{
.svg-icon {
display: none;
}
}
::v-deep .el-menu-item{
.svg-icon {
display: none;
}
}
|
|
e5b57447
杨鑫
'分包问卷'
|
210
|
</style>
|
