YingXingAI/components/PageHeader.vue

<template>
  <div class="page-header">
    <u-navbar
      :title="title"
      :is-back="isBack"
      :back-text="backText"
      :border-bottom="borderBottom"
      :background="background"
      :title-color="titleColor"
      :title-size="titleSize"
      :title-bold="titleBold"
      :z-index="zIndex"
      @leftClick="onBackClick"
      style="font-weight: bold;font-size: 40rpx;"
    >
      <template v-slot:right>
        <slot name="right"></slot>
      </template>
      <slot></slot>
    </u-navbar>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  props: {
    // 页面标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    isBack: {
      type: Boolean,
      default: true
    },
    // 返回按钮文字
    backText: {
      type: String,
      default: ''
    },
    // 是否显示底部边框
    borderBottom: {
      type: Boolean,
      default: true
    },
    // 导航栏背景
    background: {
      type: Object,
      default() {
        return {
          background: '#ffffff'
        }
      }
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: '#191919'
    },
    // 标题字体大小
    titleSize: {
      type: [Number, String],
      default: 34
    },
    // 标题是否加粗
    titleBold: {
      type: Boolean,
      default: true
    },
    // z-index 层级
    zIndex: {
      type: [Number, String],
      default: 980
    },
  },
  methods: {
    // 处理返回按钮点击
    onBackClick() {
      this.$emit('back');
    },
    // 处理选项卡切换
    switchTab(tabValue) {
      this.$emit('tab-change', tabValue);
    }
  }
}
</script>

<style scoped>
.page-header {
  width: 100%;
}
</style>