xiongmao/components/header-view-bar/header-view-bar.vue

<template>
	<view class="header-view" :style="size">
		<view class="head-bg" :style="{background: backgroundColor, opacity: opacity}">
			<image v-if="backgroundImg.length > 0" :src="backgroundImg" mode=""></image>
		</view>
		<view class="header-container" :style="{minHeight: headerContentHeight + 'px'}">
			<image v-if="!hideBack" :src="backImg" class="back" @tap="back" mode="widthFix"></image>
			<view class="header-title" :style="{color: titleColor, minHeight: headerContentHeight + 'px', opacity: titleOpacity}" v-if="title.length > 0">{{title}}</view>
			<view class="header-content">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'HeaderViewBar',
		props: {
			// 是否隐藏返回按钮
			hideBack: {
				type: Boolean,
				default: false,
			},
			// 标题
			title: {
				type: String,
				default: '',
			},
			// 标题颜色
			titleColor: {
				type: String,
				default: '#FFFFFF',
			},
			// 标题透明度
			titleOpacity: {
				type: Number,
				default: 1,
			},
			// 背景透明度
			opacity: {
				type: Number,
				default: 1,
			},
			// 背景颜色
			backgroundColor: {
				type: String,
				default: '',
			},
			// 背景图片
			backgroundImg: {
				type: String,
				default: '.',
			},
			//返回按钮图片
			backImg:{
				type: String,
				default: '../../../static/return-2.png',
			}
		},
		data() {
			return {
				headerContainerWidth: '100%',
				size: '',
				headerHeight: 0,
				headerContentHeight: 0,
			};
		},
		created() {
			// #ifdef MP
			let {height, top, left} = uni.getMenuButtonBoundingClientRect();
			this.size = `padding-top: ${top}px; min-height: ${height}px; height: max-content`;
			this.headerContainerWidth = left - 7;
			this.headerHeight = top + height + 10;
			// #endif
			// #ifdef APP || H5
			let top = 0, height = 32;
			const {statusBarHeight} = uni.getSystemInfoSync();
			top += statusBarHeight;
			this.size = `padding-top: ${top + 10}px; min-height: ${height}px; height: max-content`;
			this.headerHeight = top + height + 20;
			this.headerContainerWidth = uni.getSystemInfoSync().windowWidth;
			// #endif
			this.headerContentHeight = height;
		},
		methods: {
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			getHeaderStyle() {
				return {
					headerHeight: this.headerHeight,
					headerContentHeight: this.headerContentHeight,
					headerContainerWidth: this.headerContainerWidth,
				};
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-view{
		width: 100vw;
		padding-bottom: 10px;
		position: relative;
		z-index: 2099999999;
		display: flex;
		align-items: center;
	}
	.header-view .head-bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.header-view .head-bg>image{
		width: 100%;
		height: 100%;
	}
	.header-view .header-container {
		width: 100%;
		height: max-content;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 101;
	}
	.back{
		width: 9px;
		height: 20px;
		margin: 0 13px;
		position: absolute;
		top: 8px;
		left: 0;
		z-index: 2099999999; 
	}
	.header-view .header-container .header-title{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
	}
	.header-content{
		flex: 1;
		height: 100%;
	}
</style>