Uniapp custom header component

Officially uni-nav-bar

<template>
	<view class="nav-box" :style="{lineHeight:toBar + 'px',paddingTop:statusBarHeight+'px'}">
		<view class="nav-top-one">
			<view @click="backpage" class="icon">
				<uni-icons type="arrowleft" color="#fffff" size="23"></uni-icons>
			</view>
		</view>
		<view class="nav-top-text">
            {
   {titleName}}
		</view>
		<view class="nav-top-right">
            <slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: "cus-navbar",
		props: {
			titleName: {
				type: String,
			}
		},
		data() {
			return {
				statusBarHeight: '', // The height of the status bar 
				toBar: '', // The height of the title bar 
			};
		},
		onReady() {
			this.getPhoneHeight();
		},
		methods: {
			getPhoneHeight() { // Get height 
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						if (res.platform == "ios") {
							that.toBar = 44;
						} else if (res.platform == "android") {
							that.toBar = 44;
						} else {
							that.toBar = 44;
						}
						that.statusBarHeight = res.statusBarHeight; // The height of the status bar 
					},
				});
			},
			backpage() {
				uni.navigateBack({delta: 1});
			},
		},

	};
</script>
<style scoped>
	.nav-box {
		padding-left: 6rpx;
		background-color: #0062fe;
		color: #fff;
        display: grid;
        grid-template-columns: 0fr 4fr 2fr 3fr;
        gap: 5px;
	}

    .nav-top-text {
        text-align: left;
    }

    .nav-top-right {
        text-align: right;
    }


</style>