NN2025081602/addons/min-exam/components/navbar.vue

<template>
	<view id="navbar">
		<uv-navbar :title="title" @leftClick="leftClick" :left-icon-color="showLeft
		 || leftText?color:'transparent'" height="4rem" :safeAreaInsetTop="true" :bgColor="bgColor" :placeholder="place">
			<template v-slot:left>
				<view class="uv-nav-left" v-if="showLeft">
					<uv-icon name="arrow-left" size="1.25rem" :color="leftColor?leftColor:color"></uv-icon>
				</view>
				<view class="left-text" v-if="leftText">
					{{leftText}}
				</view>
			</template>
			<template v-slot:center v-if="title">
				<view class="uv-nav-title" :style="'color:'+color">
					{{title}}<text v-if="onLine>0"
						:class="[onLine==1?'online':'offline']">（{{onLine==1?'在线':'离线'}}）</text>
				</view>
			</template>
			<template v-slot:right v-if="rightText">
				<view class="right-text" v-if="rightUrl" @click="gotoPage(rightUrl)" :style="'color:'+rightTextColor">
					{{rightText}}
				</view>
				<view class="right-text" v-else :style="'color:'+rightTextColor">
					{{rightText}}
				</view>
			</template>
			<template v-slot:right v-if="rightIcon">
				<uv-image class="right-icon" :src="rightIcon" v-if="rightUrl" :width="righticonSize"
					:height="righticonSize" @click="gotoPage(rightUrl)"></uv-image>
				<uv-image class="right-icon" :src="rightIcon" :width="righticonSize" :height="righticonSize"
					v-else></uv-image>
			</template>
		</uv-navbar>


	</view>
</template>
<script>
	export default {
		name: "navbar",
		props: {
			title: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#fff'
			},
			leftColor: {
				type: String,
				default: ''
			},
			rightTextColor: {
				type: String,
				default: '#000'
			},
			place: {
				type: [Boolean, String],
				default: true
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			showLeft: {
				type: [Boolean, Number],
				default: true
			},
			leftUrl: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightUrl: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			onLine: {
				type: Number,
				default: 0
			},
			righticonSize: {
				type: String,
				default: '1.5rem !important'
			},
		},
		data() {
			return {
				style: {
					color: '#fff',
				}
			};
		},
		created() {

		},
		methods: {
			leftClick() {
				let _this = this
				if (this.showLeft == 2) {
					console.log('返回1')
					uni.$emit('onBack', '返回')
				} else if (this.showLeft) {
					uni.$emit('reload', {
						msg: '返回刷新'
					})
					if (this.leftUrl) {
						uni.navigateTo({
							url: this.leftUrl,
							fail() {
								uni.switchTab({
									url: _this.leftUrl
								});
							}
						});
					} else {
						console.log('历史返回')
						uni.navigateBack();
					}

				} else {
					console.log('不返回')
					return false;
				}

			},
			clickRigt() {
				this.$emit('clickRight', '点击右侧菜单')
			}
		}
	}
</script>

<style lang="scss" scoped>
	#navbar {
		position: relative;
		z-index: 99;
		width: 100%;
		// min-height: 80rpx;
	}

	.icon-left {
		margin-left: 20rpx;
	}

	.left-text {
		font-size: 1.125rem;
	}

	.uv-nav-title {
		font-size: 1.125rem;
		max-width: 14rem;
		font-weight: 500;
		white-space: normal;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;

	}

	.right-text {
		font-size: 1rem;
	}

	.right-icon {

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>