jsy-app/components/custom-nav-bar/custom-nav-bar.vue

<template>
	<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
		v-if="$slots.left && $slots.right">
		<block v-slot:left>
			<slot name="left"></slot>
		</block>
		<view>{{title}}</view>
		<block v-slot:right>
			<slot name="right"></slot>
		</block>
	</uni-nav-bar>
	<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
		v-else-if="$slots.left">
		<block v-slot:left>
			<slot name="left"></slot>
		</block>
		<view>{{title}}</view>
	</uni-nav-bar>
	<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff"
		v-else-if="$slots.right">
		<block v-slot:left>
			<view class="nav-bar-city" v-if="left" @click="onClickLeft">
				<uni-icons type="uni-icon uniui-back" />
				<text class="uni-nav-bar-text">{{leftText}}</text>
			</view>
		</block>
		<view>{{title}}</view>
		<block v-slot:right>
			<slot name="right"></slot>
		</block>
	</uni-nav-bar>
	<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff" v-else>
		<block v-slot:left>
			<view class="nav-bar-city" v-if="left" @click="onClickLeft">
				<uni-icons type="uni-icon uniui-back" />
				<text class="uni-nav-bar-text">{{leftText}}</text>
			</view>
		</block>
		<view>{{title}}</view>
	</uni-nav-bar>
</template>

<script>
	export default {
		name: "custom-nav-bar",
		emit: ["leftClick"],
		components: {},
		props: {
			title: {
				type: String,
				default: "",
				required: true
			},
			left: {
				type: Boolean,
				default: false,
			},
			leftText: {
				type: String,
				default: "",
			},
			leftClick: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {}
		},
		methods: {
			onClickLeft() {
				if (this.leftClick) {
					this.$emit("leftClick");
				} else {
					uni.navigateBack();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.uni-navbar__header-container {
		align-items: center;
		justify-content: center;

		&>view {
			font-size: 34rpx;
		}
	}

	::v-deep.uni-navbar__header-btns-right .icon {
		font-size: 44rpx;
		margin-left: 10px;
	}

	.nav-bar-city {
		.uni-icons {
			color: #fff !important;
		}

		.uni-nav-bar-text {
			color: #fff !important;
		}
	}
</style>