mteacher/src/components/header.vue

<template>
  <div
    class="mheader"
    v-if="appHide"
    :style="{ height: `calc(${titleHeight}px + ${navBarHeight}px)` }"
  >
    <header
      class="m-nav-header"
      :style="[styleName, headStyle]"
      :class="[isFixed ? 'fixed' : '', background == 'white' ? 'white' : null]"
    >
      <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>
 */
// 判断当前是否是app
import { postMessage } from "@/helpers/native-message";
import { browser } from "@/common/common";
const backStatus = browser().isApp ? false : true;
export default {
  name: "mheader",
  props: {
    appHide: {
      name: Boolean,
      default() {
        return !backStatus;
      },
    },
    name: String, // 标题名称
    isBack: {
      // 是否显示返回按钮
      type: Boolean,
      default: backStatus,
    },
    isFixed: {
      // 是否固定顶部
      type: Boolean,
      default: true,
    },
    styleName: {
      type: Object,
      default() {
        return {};
      },
    },
    background: String, // 背景色
    titleClass: String, // 标题颜色
    backUrl: {
      // 跳转指定的URL
      type: Object,
      default: () => {
        return {
          callBack: null, // 方法
          status: false, // 是否用指定的连接跳转
          path: "", // 跳转路径
          params: {}, // 跳转参数 目前只能用query的方式
        };
      },
    },
  },
  data() {
    return {
      title: this.name,
      backUrlParams: this.backUrl, // 取参数
      navBarHeight: 0, // 顶部导航栏高度
      headStyle: {},
      titleHeight: 44, // 顶部导航高度（默认44px）
    };
  },
  async created() {
    await postMessage({ api: "setBarStatus", content: { status: 0 } });
    await postMessage({
      api: "backIconChange",
      content: { iconStyle: "black" },
    });
    let sNavHeight = sessionStorage.getItem("navHeight");
    let sTitleHeight = sessionStorage.getItem("titleHeight");
    if (sNavHeight && sTitleHeight) {
      this.navBarHeight = sNavHeight;
      this.headStyle = {
        paddingTop: sNavHeight + "px",
        height: sTitleHeight + "px",
        lineHeight: sTitleHeight + "px",
      };
    } else {
      await postMessage({ api: "getNavHeight" }, (res) => {
        const { content } = res;
        let headStyle = {};
        const dpi = content.dpi || 2;
        if (content.navHeight) {
          const navHeight = content.navHeight / dpi;
          sessionStorage.setItem("navHeight", navHeight);
          this.navBarHeight = navHeight;
          headStyle = {
            paddingTop: navHeight + "px",
          };
        }
        if (content.titleHeight) {
          // 导航栏的高度
          const titleHeight = content.titleHeight / dpi;
          sessionStorage.setItem("titleHeight", titleHeight);
          this.titleHeight = titleHeight;
          headStyle.height = titleHeight + "px";
          headStyle.lineHeight = titleHeight + "px";
        }
        this.headStyle = headStyle;
      });
    }
  },
  methods: {
    goBack() {
      // 返回上层
      let urlObj = this.backUrlParams;
      // console.log(typeof urlObj.callBack)
      if (typeof urlObj.callBack == "function") {
        urlObj.callBack();
      } else {
        if (urlObj.status) {
          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: 44px;
  overflow: hidden;
  transition: all ease 0.2s;
}
.m-nav-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  color: #000000;
  text-align: center;
  user-select: none;
  &.fixed {
    position: fixed;
    z-index: 99;
  }
  &.white {
    background-color: @mColor;
    color: @whiteColor;
    .m-nav-bar__title {
      color: @whiteColor;
    }
  }
  .m-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #000000;
    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>