<template>
|
<div class="page-header-wrapper">
|
<el-page-header @back="handleBack" :content="content">
|
<template #icon v-if="$slots.icon">
|
<slot name="icon"></slot>
|
</template>
|
<template #title v-if="$slots.title">
|
<slot name="title"></slot>
|
</template>
|
<template #content v-if="$slots.content">
|
<slot name="content"></slot>
|
</template>
|
<template #extra>
|
<slot name="extra">
|
<slot name="right-button"></slot>
|
</slot>
|
</template>
|
</el-page-header>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRouter } from 'vue-router'
|
|
const props = defineProps({
|
content: {
|
type: String,
|
default: ''
|
}
|
})
|
|
const emit = defineEmits(['back'])
|
|
const router = useRouter()
|
|
const handleBack = () => {
|
emit('back')
|
// 默认返回到上一级
|
router.back()
|
}
|
</script>
|
|
<style scoped>
|
.page-header-wrapper {
|
margin-bottom: 16px;
|
}
|
|
.page-header-wrapper :deep(.el-page-header__extra) {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
</style>
|
