shanxia2.0/miniprogram/components/app-safe-header.vue

<template>
  <view class="app-safe-header" :style="headerStyle">
    <view class="app-safe-header__safe" />
    <view class="app-safe-header__nav">
      <view class="app-safe-header__left">
        <slot name="left" />
      </view>
      <view class="app-safe-header__title-wrap">
        <slot>
          <text class="app-safe-header__title">{{ title }}</text>
        </slot>
      </view>
      <view class="app-safe-header__right" />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { getGlobalSafeArea } from '@/utils/safeArea'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  background: {
    type: String,
    default: 'transparent',
  },
})

const safeArea = getGlobalSafeArea()

const headerStyle = computed(() => ({
  '--sq-safe-top': `${safeArea.topSafeHeight}px`,
  '--sq-nav-height': `${safeArea.navContentHeight}px`,
  '--sq-capsule-right-safe': `${safeArea.capsuleRightSafeWidth}px`,
  '--sq-header-background': props.background,
}))
</script>

<style scoped lang="scss">
.app-safe-header {
  background: var(--sq-header-background);
}

.app-safe-header__safe {
  height: var(--sq-safe-top, 20px);
}

.app-safe-header__nav {
  height: var(--sq-nav-height, 44px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--sq-capsule-right-safe, 96px);
  align-items: center;
  box-sizing: border-box;
}

.app-safe-header__left {
  min-width: 0;
}

.app-safe-header__title-wrap {
  min-width: 0;
}

.app-safe-header__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>