<template>
|
<view class="page-header">
|
<view class="header-left">
|
<up-icon
|
name="arrow-left"
|
size="20"
|
color="#333"
|
@click="handleBack"
|
></up-icon>
|
</view>
|
<view class="header-center">
|
<text class="page-title">{{ title }}</text>
|
</view>
|
<view class="header-right" v-if="$slots.right">
|
<slot name="right"></slot>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { defineProps, defineEmits } from 'vue';
|
|
// 定义组件属性
|
const props = defineProps({
|
// 页面标题
|
title: {
|
type: String,
|
default: ''
|
},
|
// 是否显示返回按钮
|
showBack: {
|
type: Boolean,
|
default: true
|
},
|
// 自定义返回事件
|
customBack: {
|
type: Function,
|
default: null
|
}
|
});
|
|
// 定义事件
|
const emit = defineEmits(['back']);
|
|
// 处理返回事件
|
const handleBack = () => {
|
if (props.customBack) {
|
props.customBack();
|
} else {
|
emit('back');
|
uni.navigateBack();
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.page-header {
|
background: #ffffff;
|
padding: 16px 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #f0f0f0;
|
position: sticky;
|
/* 兼容 iOS 刘海/灵动岛安全区 */
|
padding-top: calc(env(safe-area-inset-top));
|
top: 0;
|
z-index: 100;
|
position: relative;
|
}
|
|
.header-left {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
min-width: 30px; /* 确保点击区域足够大 */
|
}
|
|
.header-center {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
left: 0;
|
right: 0;
|
pointer-events: none;
|
}
|
|
.page-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
pointer-events: auto;
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
min-width: 44px; /* 确保右侧区域有足够空间 */
|
justify-content: flex-end;
|
}
|
</style>
|
