<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="header-content">
|
<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>
|
export default {
|
name: 'PageHeader',
|
props: {
|
title: {
|
type: String,
|
default: '',
|
required: false
|
},
|
breadcrumb: {
|
type: Array,
|
default: null,
|
required: false
|
},
|
logo: {
|
type: String,
|
default: '',
|
required: false
|
},
|
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() {
|
this.getBreadcrumb()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-header {
|
background: @component-background;
|
padding: 16px 32px 0;
|
border-bottom: 1px solid @border-color-base;
|
color: @text-color;
|
|
.breadcrumb {
|
margin-bottom: 16px;
|
}
|
|
.detail {
|
display: flex;
|
/*margin-bottom: 16px;*/
|
|
.avatar {
|
flex: 0 1 72px;
|
margin: 0 24px 8px 0;
|
|
& > span {
|
border-radius: 72px;
|
display: block;
|
width: 72px;
|
height: 72px;
|
}
|
}
|
|
.main {
|
width: 100%;
|
flex: 0 1 auto;
|
|
.row {
|
display: flex;
|
width: 100%;
|
|
.avatar {
|
margin-bottom: 16px;
|
}
|
}
|
|
.title {
|
font-size: 20px;
|
line-height: 28px;
|
font-weight: 500;
|
margin-bottom: 16px;
|
flex: auto;
|
}
|
.logo {
|
width: 28px;
|
height: 28px;
|
border-radius: 4px;
|
margin-right: 16px;
|
}
|
.content,
|
.header-content {
|
flex: auto;
|
line-height: 22px;
|
|
.link {
|
margin-top: 16px;
|
line-height: 24px;
|
|
a {
|
font-size: 14px;
|
margin-right: 32px;
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
|
.mobile .page-header {
|
.main {
|
.row {
|
flex-wrap: wrap;
|
|
.avatar {
|
flex: 0 1 25%;
|
margin: 0 2% 8px 0;
|
}
|
.content,
|
.header-content {
|
flex: 0 1 70%;
|
|
.link {
|
margin-top: 16px;
|
line-height: 24px;
|
|
a {
|
font-size: 14px;
|
margin-right: 10px;
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
