mes-app/components/uni-navbar-lite/uni-navbar-lite.uvue

<template>
    <view class="uni-navbar">
        <view class="uni-navbar-inner" :style="navbarStyle">
            <view class="left-content" :class="{'show-left':!showLeft}" @click="handleLeftClick">
                <text class="uni-icons" v-if="showLeft">{{unicode}}</text>
            </view>
            <view class="uni-navbar-content" :class="{'is-left':isLeft}">
                <slot>{{title}}</slot>
            </view>
            <view class="right-content" :class="{'show-right':!showRight}">
                <slot name="right">
					<!-- <view class="custom-right" v-if="showRight && enablePerson">
					  <image 
						src="/static/images/index/person.png" 
						style="height: 25px;width: 25px;"
						@click="handleRightClick"
					  />
					</view> -->
					<view class="custom-right" v-if="showRight && enablePerson" @click="handleRightClick">
						<text v-if="rightBtnText" class="custom-right-text" :style="rightBtnStyle">{{rightBtnText}}</text>
						<image v-else
							src="/static/images/map/3.png" 
							style="height: 25px;width: 25px;"
						/>
					</view>
				</slot>
            </view>
        </view>
    </view>
</template>

<script>
    // import iconpath from './uniicons.ttf'
    export default {
        name: "uni-navbar",
        props: {
        	title: {
        		type: String,
        		default: ''
        	},
        	isLeft: {
        		type: Boolean,
        		default: false
        	},
			showLeft:{
				type: Boolean,
				default: true
			},
			showRight:{
				type: Boolean,
				default: true
			},
			enableBack:{
				type: Boolean,
				default: true
			},
			enablePerson:{
				type: Boolean,
				default: true
			},
			rightBtnText: {
				type: String,
				default: ''
			},
			rightBtnStyle: {
				type: Object,
				default: () => ({})
			}
        },
        emits: ['back', 'leftClick', 'rightClick'],
        data() {
            return {
                statusBarHeight: 0
            };
        },
        computed: {
            navbarStyle() : string {
                return `margin-top:${this.statusBarHeight}px`
            },
            unicode() : string {
                return '\ue600'
            }
        },
        created() {
			// #ifndef WEB
				// 非WEB平台使用原有方式
				const iconpath = '/static/css/uniicons.ttf';
				uni.loadFontFace({
					global: false,
					family: 'UniIconsFontFamily',
					source: iconpath,
					success() { },
					fail(err) {
						console.log(err);
					},
				});
			// #endif
            // #ifdef WEB
				// WEB平台使用CSS加载字体
			// #endif
						
            const sys = uni.getSystemInfoSync()
            const statusBarHeight = sys.statusBarHeight
            this.statusBarHeight = statusBarHeight
        },
        mounted() {
          // TODO 暂时加定时器，否则不生效
          setTimeout(() => {
            uni.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#ffffff'
            })
          }, 100)
        },
        methods: {
            handleLeftClick() {
                if (this.enableBack) {
                    this.$emit('back')
                    uni.navigateBack({})
                } else {
                    this.$emit('leftClick')
                }
            },
			handleRightClick(){
				this.$emit('rightClick')
			}
        },
    }
</script>

<style>
	// #ifdef WEB
	@font-face {
		font-family: 'UniIconsFontFamily';
		src: url('/static/css/uniicons.ttf') format('truetype');
	}
	// #endif
    .uni-icons {
        font-family: "UniIconsFontFamily" !important;
        font-size: 22px;
        font-style: normal;
        color: #333;
    }
    .uni-navbar {
        border: 1px #eee solid;
        background-color: #fff;
    }
    .uni-navbar-inner {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 45px;
    }

    .left-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 100%;
    }
	
	.right-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 100%;
    }

    .uni-navbar-content {
        position: absolute;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 55px;
        right: 55px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
	.show-left{
		display: none;
	}
	.show-right{
		display: none;
	}
    .is-left {
      justify-content: flex-start;
    }
	.custom-right-text {
		font-size: 28rpx;
		color: #333333;
	}
</style>