gxt_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" @click="back">
                <text class="uni-icons" :class="{'show-left':!showLeft}">{{unicode}}</text>
            </view>
            <view class="uni-navbar-content" :class="{'is-left':isLeft}">
                <slot>{{title}}</slot>
            </view>
            <view class="right-content">
                <slot name="right">
					<view class="custom-right">
					  <image 
						src="/static/images/index/person.png" 
						style="height: 25px;width: 25px;"
						@click="onPerson"
					  />
					</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
			},
        },
        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: {
            back() {
                uni.navigateBack({})
            },
			onPerson(){
				uni.navigateTo({
				    url: '/pages/profile/index',
				    fail: (err: any) => {
				        console.log('跳转失败', err)
				    }
				})
			}
        },
    }
</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,
    .right-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 100%;
    }

    .uni-navbar-content {
        position: absolute;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 45px;
        right: 45px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
	.show-left{
		display: none;
	}
    .is-left {
      justify-content: flex-start;
    }
</style>