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

<template>
	<view class="navbar dis a-c j-s" :style="{background:background}">
		<image class="icon-right" :src="backActionimg" mode="" @tap="back()"></image>
		<template v-if="!isSlot">
			<text class="title font-weight" :style="titleStyle">{{headerTitle}}</text>
			<image class="icon-right" :style="{opacity:isShared?1:0}" :src="rightIcon?rightIcon:shareimg" mode=""
				@tap="share">
			</image>
		</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,
			},
			headerTitle: {
				type: String,
				default: 'xxxx'
			},
			background: {
				type: String,
				default: '#fff'
			},
			titleStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},
			rightIcon: {
				type: String,
				default: null
			},
			isShared: {
				type: Boolean,
				default: true,
			}

		},
		computed: {},
		data() {
			return {
				backActionimg: '',
				shareimg: '',
			};
		},
		async mounted() {
			this.backActionimg = await turnBase64Image('/static/icon/backAction.png')
			this.shareimg = await turnBase64Image('/static/icon/share.png')
		},
		methods: {
			share() {
				this.$emit('share')
			},
			back() {
				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;
		}

		.icon-right {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>