vue中头部写成公用组件

写一个公用的组件 这样在其它页面也可以直接复用

组件m-header.vue

　　

<template>
  <div class="top-page" :class="{'top-bg': hasBg}"
    :style="{height:1.28+statusBarHeight+'rem',paddingTop:0.46+statusBarHeight+'rem'}">
    <div class="top">
      <div class="back" @click="goBack">
        <!-- 返回图标箭头 -->
        <img style="width:0.5rem;height:0.5rem" src="@/assets/img/return_1.png" alt="">
      </div>
      <div class="top-title">{{title}}</div>
      <div class="top-right">
        <slot name='right'></slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'top',
    props: {
      title: {
        type: String,
        default: ''
      },
      hasBg: { //背景色默认橙色
        type: Boolean,
        default: true
      },
      routerName: { //传路由跳特定页面
        type: String,
        default: ''
      }
    },
    data() {
      return {
        statusBarHeight: this.$sysInfo ? this.$sysInfo.statusBarHeight / 100 : 0,
      }
    },
    methods: {
      goBack() {
        if (this.routerName) {
          this.$router.replace({
            name: this.routerName
          }); 
        } else {
          this.$router.go(-1)
        }
      }
    }
  }
</script>


<style lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0.32rem;
}
  // 头部样式
.top-page{
  position: fixed;
    left: 0;
    right: 0;
    top: 0;
  width: 100%;
  height: 1.28rem;
  .top{
    height: 1.28rem;
    text-align: center;
    display: flex;
    font-size: 1rem;
    padding: 0 0.2rem;
    // justify-content: space-around;
    align-items: center;
    color: #fff;
    .back{
    }
    .top-title{
      flex: 1;
    }
    .top-right{
      // width: 1.24rem;
    }
  }
}
.top-bg{
  background: linear-gradient(-226deg, #FE7514 0%, #FFC15D 100%);
}
</style>

在其他页面中引入组件并使用  index.vue

<template>
  <div>
    <top title="首页表题" class="top">
      <div slot="right">
      右边
      </div>
    </top>
    <div style="height:500px;" @click="toPh">点击</div>
  </div>
</template>
<script>
import top from '@/components/m-header.vue'
export default {
  components: {
    top
  },
  name: 'index',
  data() {
    return {
    };
  },
  created() {
    // if(this.$client.WEBKIT) {
    //   console.log('谷歌首页')
    // }
  },
  methods:{
    toPh() {
      this.$router.push({
        name: 'father'
      })
    },
  }
};
</script>

效果显示：

 

 在其他页面使用只需改页面标题 title文字即可。