APP/components/custom-navbar/custom-navbar.vue

<template>
	<view class="custom-navbar" :style="{ 
	paddingTop: statusBarHeight + 'px',
	color: color
	}">
		<!-- 左侧按钮 -->
		<view class="navbar-left">
			<slot name="left">
				<!-- 返回按钮（独立点击事件） -->
				<uni-icons type="left" v-if="showBack" size="26" color="rgba(255, 255, 255, 0.9)"
					@click="handleBack"></uni-icons>
			</slot>
		</view>
		<!-- 标题 -->
		<view class="navbar-title" :style="{ color: color }">
			<slot>{{ title }}</slot>
		</view>
		<!-- 右侧按钮 -->
		<view class="navbar-right">
			<slot name="right">
				<!-- 默认显示文字 -->
				<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
					{{ rightText }}
				</text>
				<!-- 或显示图标 -->
				<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick"  mode=""
					class="pathIMG">
				</image>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			showBack: {
				type: Boolean,
				default: false
			},

			backgroundColor: {
				type: String,
				default: '#FFFFFF' // 修改默认背景色为白色
			},
			color: {
				type: String,
				default: '#333333' // 修改默认文字色为深灰
			},
			rightText: String, // 右侧文字
			rightIcon: {
				type: String, // 改为 String 类型，接收图片路径
				default: '' // 默认空字符串
			},
			rightColor: { // 右侧内容颜色
				type: String,
				default: '#FFFFFF'
			},
			rightIconSize: { // 图标大小
				type: Number,
				default: 24
			}
		},
		data() {
			return {
				statusBarHeight: 0
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			handleBack() {
				uni.navigateBack()
			},
			handleRightClick() {
				this.$emit('right-click'); // 触发右侧点击事件
			}
		}
	}
</script>

<style scoped>
	.custom-navbar {
		display: flex;
		align-items: center;
		height: 70px;
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		z-index: 999;
		line-height: 44px;
		background-color: #121212 !important;
	}

	.navbar-left,
	.navbar-right {
		min-width: 100rpx;
		/* 增大最小宽度 */
		padding: 0 15px;
		display: flex;
		align-items: center;
		gap: 10px;
		/* 图标间距 */
	}

	.navbar-left {
		justify-content: flex-start;
	}

	.navbar-right {
		justify-content: flex-end;
	}

	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
	}

	.icon {
		width: 34px;
		height: 34px;
	}

	.pathIMG {
		width: 40rpx;
		height: 40rpx;
	}
</style>