FirstUI-vue/components/firstui/fui-nav-bar/fui-nav-bar.vue

<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1  86140  7   25  49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view :style="getStyle">
		<view class="fui-nav__bar"
			:class="{'fui-nav__bar-line':splitLine,'fui-nva__bar-bg':!background,'fui-nav__bar-fixed':isFixed}"
			:style="{background:background,'border-bottom-color':lineColor,paddingLeft:padding+'px',paddingRight:padding+'px',zIndex:zIndex}">
			<view class="fui-nav__status-bar" :style="{height:statusBarHeight+'px'}" v-if="statusBar"></view>
			<view class="fui-nav__header" v-if="!custom">
				<view class="fui-nav__left" @tap="leftClick">
					<slot></slot>
				</view>
				<view class="fui-nav__title" v-if="title" @tap="titleClick">
					<text class="fui-nav__title-text"
						:style="{fontSize:size+'px',color:color,fontWeight:fontWeight}">{{title}}</text>
				</view>
				<view class="fui-nav__right" @tap="rightClick">
					<slot name="right"></slot>
				</view>
			</view>
			<view class="fui-nav__header" v-if="custom">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	var sys = uni.getSystemInfoSync();
	export default {
		name: "fui-nav-bar",
		emits: ['init', 'leftClick', 'rightClick', 'titleClick'],
		props: {
			//navbar左右padding值，单位px
			padding: {
				type: [Number, String],
				default: 8
			},
			//标题
			title: {
				type: String,
				default: ''
			},
			//标题字体大小，单位px
			size: {
				type: [Number, String],
				// #ifdef H5
				default: 16
				// #endif
				// #ifndef H5
				default: 17
				// #endif
			},
			//标题颜色
			color: {
				type: String,
				// #ifdef APP-NVUE
				default: '#181818'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			fontWeight: {
				type: [Number, String],
				default: 500
			},
			//背景颜色
			background: {
				type: String,
				// #ifdef APP-NVUE
				default: '#fff'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			//是否需要底部分割线
			splitLine: {
				type: Boolean,
				default: false
			},
			//分割线颜色，仅Nvue生效
			lineColor: {
				type: String,
				default: '#eee'
			},
			//是否包含状态栏
			statusBar: {
				type: Boolean,
				default: true
			},
			//是否固定在顶部
			isFixed: {
				type: Boolean,
				default: false
			},
			//z-index
			zIndex: {
				type: [Number, String],
				default: 996
			},
			//自定义navbar内容，title、右插槽失效
			custom: {
				type: Boolean,
				default: false
			},
			//v1.9.9+
			isOccupy: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			getStyle() {
				let style = ''
				if (this.isOccupy) {
					let height = this.statusBar ? (this.statusBarHeight + 44) : 44
					style += `height:${height}px;`
				}
				return style
			}
		},
		data() {
			return {
				statusBarHeight: sys.statusBarHeight
			};
		},
		created() {
			let obj = {};
			// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
			obj = uni.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			this.$emit('init', {
				windowWidth: sys.windowWidth,
				//不包含状态栏高度固定为：44px
				height: 44,
				statusBarHeight: this.statusBarHeight,
				//小程序右上角悬浮按钮左边界坐标，单位：px
				left: obj.left || -1,
				//小程序右上角悬浮按钮宽度，单位：px
				btnWidth: obj.width || 0,
				//小程序右上角悬浮按钮高度，单位：px
				btnHeight: obj.height || 0
			})
		},
		methods: {
			leftClick() {
				this.$emit("leftClick");
			},
			rightClick() {
				this.$emit("rightClick");
			},
			titleClick() {
				this.$emit("titleClick");
			}
		}
	}
</script>

<style scoped>
	.fui-nav__status-bar {
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing: border-box;
		/* #endif */
	}

	.fui-nav__header {
		height: 44px;
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
	}

	.fui-nav__bar {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing: border-box;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-nva__bar-bg {
		background: var(--fui-bg-color, #fff) !important;
	}

	/* #endif */
	.fui-nav__bar-line {
		position: relative;
		/* #ifdef APP-NVUE */
		border-bottom: 0.5px;
		border-bottom-style: solid;
		/* #endif */
		/* #ifndef APP-NVUE */
		border-bottom: 0;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-nav__bar-line::after {
		content: '';
		position: absolute;
		border-bottom: 1px solid var(--fui-color-border, #EEEEEE) !important;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		transform-origin: 0 100%;
		bottom: 0;
		right: 0;
		left: 0;
	}

	/* #endif */
	.fui-nav__left {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 150rpx;
		justify-content: flex-start;
		align-items: center;
	}

	.fui-nav__right {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 150rpx;
		justify-content: flex-end;
		align-items: center;
	}

	.fui-nav__title {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding: 0 30rpx;
	}

	/* #ifndef APP-NVUE */
	.fui-nav__title-color {
		color: var(--fui-color-title, #181818) !important;
	}

	/* #endif */

	.fui-nav__title-text {
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */

		/* #ifndef APP-NVUE */
		display: block;
		overflow: hidden;
		white-space: nowrap;
		/* #endif */

		text-overflow: ellipsis;
	}

	.fui-nav__bar-fixed {
		position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		top: 0;
	}
</style>