自定义导航栏组件

首先我们需要在项目文件夹中的components中新建我们的组件文件nav-bar.vue

<template>
    <!-- <view style="display: flex;flex-direction: column;width: 100%;"> -->
        <!-- <view class="status-bar"></view> -->
        <view class="navbar">
            <view class="navbar-left" @click="$_leftClick">
                <image :src="leftImage"></image>
            </view>
            <view class="navbar-center" @click="$_centerClick">
                <text>{{centerText}}</text>
            </view>
            <view class="navbar-right" @click="$_rightClick">
                <image :src="rightImage"></image>
            </view>
        </view>
    <!-- </view> -->
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        props: {
            leftImage: {
                type: String,
                default: ''
            },
            centerText: {
                type: String,
                default: ''
            },
            rightImage: {
                type: String,
                default: ''
            }
        },
        methods: {
            $_leftClick() {
                console.log("点击父类左侧按钮")
                this.$emit("leftClick");

            },
            $_centerClick() {
                console.log("点击父类中间按钮")
                this.$emit("centerClick");
            },
            $_rightClick() {
                console.log("点击父类右侧按钮")
                this.$emit("rightClick");
            },
        },
    }
</script>

<style>
/*  .status-bar {
        width: 100%;
        box-sizing: border-box;
        display: block;
        margin-bottom: -3upx;
        height: var(--status-bar-height);
        line-height: var(--status-bar-height);
        background: transparent;
    } */

    .navbar {
        width: 100%;
        height: 128upx;
        margin-top: var(--status-bar-height);
        background: url(../../static/images/bg.jpg);
        display: flex;
        flex-direction: row;
    }

    .navbar-left {
        width: 64upx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-left image {
        width: 36upx;
        height: 36upx;
    }

    .navbar-center {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 36upx;
    }

    .navbar-right {
        width: 64upx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-right image {
        width: 36upx;
        height: 36upx;
    }
</style>

在页面中如何使用

<template>
    <!-- 导航栏 -->
    <nav-bar leftImage="../../../../static/images/icon_4.png" centerText="事件登记" rightImage="" @leftClick="leftClick"
     @centerClick="centerClick" @rightClick="rightClick"></nav-bar>
</template>
<script>
    // 导航栏方法
    import navBar from "@/components/nav-bar/nav-bar.vue"
    export default {
        components: {
            navBar
        },
        data() {
            return {
            };
        },
        methods: {
            // 导航栏方法
            leftClick() {
                console.log("点击子类左侧按钮")
                uni.navigateBack()
            },
            centerClick() {
                console.log("点击子类中间按钮")
            },
            rightClick() {
                console.log("点击子类右侧按钮")
            },
        }
    }
</script>
<style>
</style>