95 lines
1.7 KiB
Vue
95 lines
1.7 KiB
Vue
<template>
|
|
<div class="page-header">
|
|
<u-navbar
|
|
:title="title"
|
|
:is-back="isBack"
|
|
:back-text="backText"
|
|
:border-bottom="borderBottom"
|
|
:background="background"
|
|
:title-color="titleColor"
|
|
:title-size="titleSize"
|
|
:title-bold="titleBold"
|
|
:z-index="zIndex"
|
|
@leftClick="onBackClick"
|
|
style="font-weight: bold;font-size: 40rpx;"
|
|
>
|
|
<template v-slot:right>
|
|
<slot name="right"></slot>
|
|
</template>
|
|
<slot></slot>
|
|
</u-navbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PageHeader',
|
|
props: {
|
|
// 页面标题
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示返回按钮
|
|
isBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 返回按钮文字
|
|
backText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示底部边框
|
|
borderBottom: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 导航栏背景
|
|
background: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
background: '#ffffff'
|
|
}
|
|
}
|
|
},
|
|
// 标题颜色
|
|
titleColor: {
|
|
type: String,
|
|
default: '#191919'
|
|
},
|
|
// 标题字体大小
|
|
titleSize: {
|
|
type: [Number, String],
|
|
default: 34
|
|
},
|
|
// 标题是否加粗
|
|
titleBold: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// z-index 层级
|
|
zIndex: {
|
|
type: [Number, String],
|
|
default: 980
|
|
},
|
|
},
|
|
methods: {
|
|
// 处理返回按钮点击
|
|
onBackClick() {
|
|
this.$emit('back');
|
|
},
|
|
// 处理选项卡切换
|
|
switchTab(tabValue) {
|
|
this.$emit('tab-change', tabValue);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-header {
|
|
width: 100%;
|
|
}
|
|
</style> |