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">{{unicode}}</text>
            </view>
            <view class="uni-navbar-content">
                <slot>{{title}}</slot>
            </view>
            <view class="right-content">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
    import iconpath from './uniicons.ttf'
    export default {
        name: "uni-navbar",
        props: {
        	title: {
        		type: String,
        		default: ''
        	},
        	open: {
        		type: Boolean,
        		default: false
        	},
        	disabled: {
        		type: Boolean,
        		default: false
        	}
        },
        data() {
            return {
                statusBarHeight: 0
            };
        },
        computed: {
            navbarStyle() : string {
                return `margin-top:${this.statusBarHeight}px`
            },
            unicode() : string {
                return '\ue600'
            }
        },
        created() {
            uni.loadFontFace({
                global: false,
                family: 'UniIconsFontFamily',
                source: iconpath,
                success() { },
                fail(err) {
                    console.log(err);
                },
            })

            const sys = uni.getSystemInfoSync()
            const statusBarHeight = sys.statusBarHeight
            this.statusBarHeight = statusBarHeight
        },
        methods: {
            back() {
                uni.navigateBack({})
            }
        },
    }
</script>

<style>
    .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;
        justify-content: center;
        align-items: center;
    }
</style>