|
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
|
<template>
<div class="page-header">
<div class="page-header-index-wide">
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link v-if="item.name != name" :to="{ path: item.path }">
{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<div class="detail">
<div class="main" v-if="!$route.meta.hiddenHeaderContent">
<div class="row">
<img v-if="logo" :src="logo" class="logo"/>
<h1 v-if="title" class="title">{{ title }}</h1>
<div class="action">
<slot name="action"></slot>
</div>
</div>
<div class="row">
<div v-if="avatar" class="avatar">
<a-avatar :src="avatar"/>
</div>
<div v-if="this.$slots.content" class="headerContent">
<slot name="content"></slot>
</div>
<div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot>
</div>
</div>
<div>
<slot name="pageMenu"></slot>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
|
|
44
45
46
47
48
49
50
51
52
53
54
55
|
import Breadcrumb from '@/components/tools/Breadcrumb'
export default {
name: "PageHeader",
components: {
"s-breadcrumb": Breadcrumb
},
props: {
title: {
type: String,
default: '',
required: false
|
|
56
|
},
|
|
57
58
59
60
|
breadcrumb: {
type: Array,
default: null,
required: false
|
|
61
|
},
|
|
62
63
64
65
|
logo: {
type: String,
default: '',
required: false
|
|
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
|
avatar: {
type: String,
default: '',
required: false
}
},
data() {
return {
name: '',
breadList: [],
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
this.breadList = []
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
this.name = this.$route.name
this.$route.matched.forEach((item) => {
// item.name !== 'index' && this.breadList.push(item)
this.breadList.push(item)
})
}
},
watch: {
$route() {
|
|
97
98
99
|
this.getBreadcrumb()
}
}
|
|
100
|
}
|
|
101
102
103
104
|
</script>
<style lang="less" scoped>
|
|
105
106
107
108
109
110
111
112
113
114
115
116
|
.page-header {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
.breadcrumb {
margin-bottom: 16px;
}
.detail {
display: flex;
/*margin-bottom: 16px;*/
|
|
117
|
|
|
118
119
120
121
122
123
124
125
126
127
|
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
|
|
128
129
|
}
|
|
130
131
132
|
.main {
width: 100%;
flex: 0 1 auto;
|
|
133
|
|
|
134
135
136
137
138
139
|
.row {
display: flex;
width: 100%;
.avatar {
margin-bottom: 16px;
|
|
140
141
142
|
}
}
|
|
143
144
145
|
.title {
font-size: 20px;
font-weight: 500;
|
|
146
|
|
|
147
148
149
150
151
152
|
font-size: 20px;
line-height: 28px;
font-weight: 500;
color: rgba(0, 0, 0, .85);
margin-bottom: 16px;
flex: auto;
|
|
153
|
|
|
154
|
}
|
|
155
|
|
|
156
157
158
159
160
161
|
.logo {
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
|
|
162
|
|
|
163
164
165
166
|
.content, .headerContent {
flex: auto;
color: rgba(0, 0, 0, .45);
line-height: 22px;
|
|
167
|
|
|
168
169
170
171
172
173
174
|
.link {
margin-top: 16px;
line-height: 24px;
a {
font-size: 14px;
margin-right: 32px;
|
|
175
176
|
}
}
|
|
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
}
.extra {
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
&:empty {
display: none;
|
|
194
195
196
197
|
}
}
}
}
|
|
198
|
}
|
|
199
|
|
|
200
|
.mobile .page-header {
|
|
201
|
|
|
202
|
.main {
|
|
203
|
|
|
204
205
|
.row {
flex-wrap: wrap;
|
|
206
|
|
|
207
208
209
210
211
212
213
|
.avatar {
flex: 0 1 25%;
margin: 0 2% 8px 0;
}
.content, .headerContent {
flex: 0 1 70%;
|
|
214
|
|
|
215
216
217
|
.link {
margin-top: 16px;
line-height: 24px;
|
|
218
|
|
|
219
220
221
|
a {
font-size: 14px;
margin-right: 10px;
|
|
222
223
|
}
}
|
|
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
}
.extra {
flex: 1 1 auto;
margin-left: 0;
min-width: 0;
text-align: right;
}
.action {
margin-left: unset;
min-width: 266px;
flex: 0 1 auto;
text-align: left;
margin-bottom: 12px;
&:empty {
display: none;
|
|
242
243
244
245
|
}
}
}
}
|
|
246
|
}
|
|
247
|
</style>
|