LocalLivingServicesUniapp/components/uni-NavBar/uni-NavBar.vue

<template>
	<view class="navbar dis a-c j-s" :style="{background:background}">
		<image class="icon-left" :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'
			},
			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,
			}

		},
		computed: {

		},
		data() {
			return {
				backActionimg: '/static/icon/backAction.png', //返回图标
				shareimg: '',
				computedRightIcon: "",
			};
		},
		async mounted() {

		},
		methods: {
			share() {
				this.$emit('share')
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

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

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

		.icon-left {
			width: 64rpx;
			height: 60rpx;
		}

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

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

	}
</style>