mobile/src/components/container/index.vue

<template>
  <!-- 小程序环境 会把$attrs 解析到最外层标签（虚拟标签，导致无效），只能使用自定义参数 -->
  <div class="container" :class="props.cusClass" :style="props.cusStyle">
    <ay-sticky top="0px" v-if="data.isCustom">
      <div class="page-top" :style="{ height: props.topHeight, ...props.pageTopStyle }">
        <div class="center page-title" :class="{ 'justify-start': data.titleAlginStart }">
          <uni-icons
            class="mr-spacd4"
            v-if="data.showBackIcon"
            type="left"
            color=""
            size="24"
            @click="ay.navigateBack()"
          />
          <div class="font-bold bs-fz">{{ title }}</div>
        </div>
      </div>
    </ay-sticky>
    <div class="pt-spac" v-if="props.showSpac" />
    <!-- 小程序内只能用v-if移除组件，如果用v-show条件false时，整个页面不显示。。 -->
    <ay-pull v-if="store.curPage.pageConfig?.isPager">
      <slot />
    </ay-pull>
    <slot v-else />
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'container',
})
const props = withDefaults(
  defineProps<{
    cusClass?: AnyObject | string[]
    cusStyle?: AnyObject
    pageTopStyle?: AnyObject
    title?: string
    topHeight: string
    showSpac: boolean
  }>(),
  {
    showSpac: true,
    topHeight: `${config.common.safeAreaTopHeight}px`,
  },
)
/** 采用局部数据 代替全局存储数据，防止页面跳转时显示下个页面的标题等信息 */
const data = reactive({
  title: '',
  showBackIcon: false,
  titleAlginStart: true,
  isCustom: false,
})
const title = computed(() => props.title || data.title)
onMounted(() => {
  data.title = store.curPage.pageConfig.title
  data.showBackIcon = ![config.pages.index_index._url, config.pages.login_index._url].includes(
    store.curPage.pageConfig._url,
  )
  data.titleAlginStart = store.curPage.pageConfig._url !== config.pages.login_index._url
  data.isCustom = store.curPage.pageConfig.style?.navigationStyle === 'custom'
})
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding: $p-spac;
  padding-top: 0;
}

.page-top {
  padding: 0 $p-spac;
  margin: 0 calc($p-spac / -1);
  // margin-bottom: $p-spac;
  background-color: #f8f8f8;
  @apply flex;
  @apply items-end;
}

.page-title {
  // position: absolute;
  // top: 50px;
  // right: 0;
  // left: 0;
  width: 100%;
  height: 44px;
}
</style>