ai-watch-app/uni_modules/tm-nav-bar/components/tm-nav-bar/tm-nav-bar.vue

<template>
	<view class="uni-navbar" :style="{zIndex: 999999}">
		<!-- 顶部导航栏 -->
		<view class="tm-navbar__content" :class="{ 'tm-navbar--fixed': fixed}"
			:style="{ height: height + 'px', color: titleColor, 'fontSize': fontSize + 'px', background: backgroundColor }">
			<!-- 背景图 -->
			<img class="tm-navbar__header-bg" v-if="backgroundType" :src="backgroundImgUrl" alt="">
			<!-- 左侧图标按钮 -->
			<view @tap="onClickLeft" class="tm-navbar__header-btns tm-navbar__header-btns-left">
				<uni-icons v-if="leftIcon.length" :color="leftColor" :type="leftIcon" :size="iconSize" />
				<text class="tm-navbar-btn-text" v-if="leftText.length"
					:style="{ color: leftColor, fontSize: fontSize + 'px' }">{{ leftText }}</text>
				<slot name="left" />
			</view>

			<!-- 标题文字-->
			<view class="tm-navbar__header-container" @tap="onClickTitle">
				<view class="tm-navbar__header-title textOverflow">
					{{title}}
				</view>
				<!-- 标题插槽 -->
				<slot />
			</view>

			<!-- 右侧图标按钮 -->
			<view @tap="onClickRight" class="tm-navbar__header-btns tm-navbar__header-btns-right">
				<uni-icons v-if="rightIcon.length" :color="rightColor" :type="rightIcon" :size="iconSize" />
				<text class="tm-navbar-btn-text" v-if="rightText.length"
					:style="{ color: rightColor, fontSize: fontSize + 'px' }">{{ rightText }}</text>
				<slot name="right" />
			</view>
		</view>
		<view class="tm-navbar__place" v-if="fixed && backgroundColor !== 'transparent'">
			<status-bar v-if="statusBar" />
			<view :style="{height: height + 'px'}" />
		</view>
	</view>

</template>

<script>
	import statusBar from "./tm-status-bar.vue";
	export default {
		name: "tmNavBar",
		components: {
			statusBar
		},
		props: {
			height: {
				type: Number,
				default () {
					// #ifdef APP
					return 100					
					// #endif
					// #ifdef H5
					return 54					
					// #endif
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			},
			fontSize: {
				type: Number,
				default () {
					return 14
				}
			},
			iconSize: {
				type: Number,
				default () {
					return 22
				}
			},
			leftText: {
				type: String,
				default () {
					return ''
				}
			},
			leftIcon: {
				type: String,
				default () {
					return 'arrowleft'
				}
			},
			leftColor: {
				type: String,
				default () {
					return '#333'
				}
			},
			rightText: {
				type: String,
				default () {
					return ''
				}
			},
			rightIcon: {
				type: String,
				default () {
					return ''
				}
			},
			rightColor: {
				type: String,
				default () {
					return '#333'
				}
			},
			titleColor: {
				type: String,
				default () {
					return '#333'
				}
			},
			backgroundType: {
				type: Number,
				// 0: 背景颜色  1: 背景图片
				default: 0
			},
			backgroundColor: {
				type: String,
				default () {
					return '#ffffff'
				}
			},
			backgroundImgUrl: {
				type: String,
				default () {
					return ''
				}
			},
			fixed: {
				type: [Boolean, String],
				default: false
			},
			statusBar: {
				type: [Boolean, String],
				default: false
			},
		
		},
		methods: {
			onClickLeft() {
				this.$emit("clickLeft");
			},
			onClickRight() {
				this.$emit("clickRight");
			},
			onClickTitle() {
				this.$emit("clickTitle");
			},
		}
	}
</script>

<style lang="scss">
	.tm-navbar__content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		padding-top: constant(safe-area-inset-top); /* 兼容 iOS 12.0-12.1 */
		padding-top: env(safe-area-inset-top); /* 兼容 iOS 11.0-11.4 */
		background-color: #fff;
		.tm-navbar__header-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.tm-navbar__header-title {
			text-align: center;
			letter-spacing: 2upx;
			font-size: 36rpx;
			font-weight: 800;
		}

		.tm-navbar__header-btns {
			width: auto;
			height: 60upx;
			min-width: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;

			&.tm-navbar__header-btns-left {
				justify-content: flex-start;
			}
			
			.tm-navbar-btn-text {
				margin: 0 5rpx;
			}
		}
	}

	.tm-navbar--fixed {
		position: fixed;
		z-index: 998;
	}

	.tm-navbar__place {}
</style>