mteacher/src/components/MHeader.vue

<template>
    <div class="mheader">
        <header class="m-nav-header" :class="[isFixed ? 'fixed' : '']">
            <div class="m-nav-bar__left" @click="goBack" v-show="isBack">
                <van-icon class="arrow-left" name="arrow-left"></van-icon>
            </div>
            <div class="m-nav-bar__title">
                <slot>{{ name ? name : this.$route.meta.descrition }}</slot>
            </div>
            <div class="m-nav-bar__right">
                <slot name="right"></slot>
            </div>
        </header>
    </div>
</template>

<script>
/**
 * 插槽使用方式
 *  <template v-slot:right>
        这里
    </template>
 */
export default {
    name: 'mheader',
    props: {
        name: String, // 标题名称
        isBack: { // 是否显示返回按钮
            type: Boolean,
            default: true
        },
        isFixed: { // 是否固定顶部
            type: Boolean,
            default: true
        },
        backUrl: { // 跳转指定的URL
            type: Object,
            default: () => {
                return {
                    callBack: null, // 方法
                    path: '', // 跳转路径
                    params: {}, // 跳转参数 目前只能用query的方式
                }
            }
        }
    },
    methods: {
        goBack() { // 返回上层
            let urlObj = this.backUrl
            // console.log(typeof urlObj.callBack)
            if(typeof urlObj.callBack == 'function') {
                urlObj.callBack()
            } else {
                if(urlObj.path) {
                    this.$router.push({
                        path: urlObj.path,
                        query: urlObj.params
                    })
                } else {
                    history.go(-1)
                }
            }

            
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/commonLess/variable');
.mheader {
    height: .46rem;
    overflow: hidden;
}
.m-nav-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .46rem;
    line-height: .46rem;
    background-color:  @whiteColor;
    text-align: center;
    user-select: none;
    color: @blackColor;
    &.fixed {
        position: fixed;
        z-index: 99;
    }
    .m-nav-bar__title {
        max-width: 60%;
        margin: 0 auto;
        color: @blackColor;
        font-weight: 500;
        font-size: .16rem;
    }
    .m-nav-bar__left, .m-nav-bar__right {
        position: absolute;
        bottom: 0;
    }
    .m-nav-bar__left {
        left: .12rem;
        .arrow-left {
            font-size: .21rem;
            vertical-align: middle;
        }
    }
    .m-nav-bar__right {
        right: .12rem;
    }
}
</style>