workApp/components/nav-bar.vue

<template>
	<uni-nav-bar :height="`${height}rpx`" :backgroundColor="backgroundColor" :fixed="true" :border="false" :statusBar="true" :leftWidth="showLeftIcon?'48rpx':'0rpx'" :rightWidth="showRightIcon?'48rpx':'0rpx'">
		<template v-slot:left v-if="showLeftIcon">
			<uni-icons type="left" :color="leftIconColor" style="font-size: 40rpx;" @click="GoBack()" />
		</template>
		<view class="center_view">
			<view v-if="showTitle" class="title">
				<text class="nav_title" :style="{'color':navTitleColor}">{{title}}</text>
			</view>
		</view>
	</uni-nav-bar>
</template>

<script setup>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

	const emit = defineEmits(['GoBack']);
	const props = defineProps({
		height: {
			type: String,
			default: () => ''
		},
		showLeftIcon: {
			type: Boolean,
			default: () => false
		},
		showRightIcon: {
			type: Boolean,
			default: () => false
		},
		showTitle: {
			type: Boolean,
			default: () => false
		},
		title: {
			type: String,
			default: () => ''
		},
		backgroundColor:{
			type: String,
			default: () => '#FFFFFF'
		},
		leftIconColor:{
			type: String,
			default: () => '#333333'
		},
		navTitleColor:{
			type: String,
			default: () => '#333333'
		},
		backPath: {
			type: String,
			default: () => ''
		}
	});

	const GoBack = () => {
		if (props.backPath == 'myIndex') {
			uni.switchTab({
				url: '/pages/my/index'
			});
		} else {
			emit('GoBack');
		}
	}
</script>

<style scoped lang="scss">
	:deep(.uni-navbar__header) {
		padding: 0;
		position: relative;
		z-index: 999;
	}

	:deep(.uni-navbar__header-container) {
		padding: 0;
	}

	:deep(.uni-navbar__header-btns-left) {
		position: absolute;
		left: 24rpx;
		top: 0;
		height: 88rpx;
		z-index: 2;
	}

	.center_view {
		width: 100%;

		.title {
			height: 88rpx;
			padding: 0 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.nav_title {
				flex: 1;
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>