zhapp/components/uni-NavBar/uni-NavBar.vue

<template>
	<view class="navbar dis a-c j-s" :style="{background:background,borderBottom:borderBottom}">
		<image class="icon-right" :src="backActionimg" mode="" @tap="back()"></image>
		<template v-if="!isSlot">
			<text class="title font-weight" :style="titleStyle">{{headerTitle}}</text>
			<template v-if="!rightSlot">
				<view class="dis f-c a-c" :style="{opacity:isShared?1:0}">
					<image v-if="rightIcon" class="icon-right" :src="computedRightIcon" mode="" @tap="share">
					</image>
					<text v-if="rightText" class="right-text" @tap="share" :style="rightTextStyle">{{rightText}}</text>
				</view>
			</template>
			<template v-else>
				<view class="dis a-c ">
					<slot name="rightSlot">
					</slot>
				</view>
			</template>
		</template>
		<template v-else>
			<slot name="search">
			</slot>
		</template>
	</view>
</template>

<script>
	import {
		turnBase64Image
	} from '@/plugins/utils.js';
	export default {
		name: 'name', //插件名称
		props: {
			isSlot: {
				type: Boolean,
				default: false,
			},
			rightSlot: {
				type: Boolean,
				default: false,
			},
			headerTitle: {
				type: String,
				default: 'xxxx'
			},
			background: {
				type: String,
				default: '#fff'
			},
			borderBottom: {
				type: String,
				default: 'none'
			},
			titleStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},
			rightTextStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},
			rightIcon: {
				type: Boolean,
				default: true,
			},
			iconImage: {
				type: String,
				default: null
			},
			rightBtnType: {
				type: String,
				default: 'icon' //icon 图标按钮  text 文字按钮
			},
			rightText: {
				type: String,
				default: "",
			},
			isShared: {
				type: Boolean,
				default: true,
			},
			backKeySlot: { //返回键插槽
				type: Boolean,
				default: false,
			}
		},
		computed: {

		},
		data() {
			return {
				backActionimg: '', //返回图标
				shareimg: '',
				computedRightIcon: "",
			};
		},
		async mounted() {
			this.backActionimg = await turnBase64Image('/static/icon/backAction.png')
			this.shareimg = await turnBase64Image('/static/icon/share.png')
			// 处理 rightIcon 的转换
			if (this.iconImage) {
				this.computedRightIcon = await turnBase64Image(this.iconImage);
			} else {
				this.computedRightIcon = this.shareimg; // 如果没有 iconImage，使用 shareimg
			}
		},
		methods: {
			share() {
				this.$emit('share')
			},
			back() {
				// 默认返回上一级，自定义插槽特殊处理
				if (this.backKeySlot) {
					this.$emit('backKeyChange')
				} else {
					uni.navigateBack(-1)
				}
			}
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.navbar {
		padding: 116rpx 30rpx 16rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 9999;

		.title {
			font-size: 36rpx;
			color: #333;
			position: absolute;
			/* 绝对定位 */
			left: 50%;
			/* 从左侧50%开始 */
			transform: translateX(-50%);
			/* 向左移动自身宽度的一半 */
		}

		.icon-right {
			width: 48rpx;
			height: 48rpx;
		}

		.right-text {
			color: #333;
			font-size: 20rpx;
		}

	}
</style>