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 : $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: 0.46rem;
  overflow: hidden;
}
.m-nav-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.46rem;
  line-height: 0.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: 0.16rem;
  }
  .m-nav-bar__left,
  .m-nav-bar__right {
    position: absolute;
    bottom: 0;
  }
  .m-nav-bar__left {
    left: 0.12rem;
    .arrow-left {
      font-size: 0.21rem;
      vertical-align: middle;
    }
  }
  .m-nav-bar__right {
    right: 0.12rem;
  }
}
</style>