MoeNovaClient/components/PageHeader/PageHeader.vue

<template>
  <view class="PageHeader">
    <view class="status-bar"></view>
    <view class="navbar" :style="cssStyle">
      <view class="navbar-left">
        <view class="back-icon" @click="isBack ? goBack() : back()">
          <uni-icons type="left left-back" size="20" color="#000000"></uni-icons>
        </view>
      </view>
      <view class="navbar-title">
        {{ title }}
        <slot name="center"></slot>
      </view>
      <view class="navbar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PageHeader',
  props: {
    title: {
      type: String,
      default: ''
    },
    cssStyle: {
      type: Object,
      default: () => ({})
    },
    isBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    back() { 
      this.$emit('back');
    }
  }
}
</script>

<style lang="scss" scoped>
.PageHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #ffffff;
}

.status-bar {
  height: var(--status-bar-height);
}

.navbar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
}

.navbar-left {
  width: 120rpx;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-right {
  width: 120rpx;
  text-align: right;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>