shoot-miniprograms/src/components/Container.vue

<script setup>
import { ref, onMounted } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import ScreenHint from "@/components/ScreenHint.vue";
defineProps({
  title: {
    type: String,
    default: "",
  },
  bgType: {
    type: Number,
    default: 0,
  },
  onBack: {
    type: Function,
    default: null,
  },
  overflow: {
    type: String,
    default: "auto",
  },
  isHome: {
    type: Boolean,
    default: false,
  },
});
const isIos = ref(true);
const showHint = ref(false);
const hintMessage = ref("");
onMounted(() => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
});
const showGlobalHint = (message) => {
  hintMessage.value = message;
  showHint.value = true;
};
uni.$showHint = showGlobalHint;
</script>

<template>
  <view>
    <AppBackground :type="bgType" />
    <Header v-if="!isHome" :title="title" :onBack="onBack" />
    <view
      class="content"
      :style="{ height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
    >
      <slot></slot>
    </view>
    <ScreenHint :show="showHint" :onClose="() => (showHint = false)">
      {{ hintMessage }}
    </ScreenHint>
  </view>
</template>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-x: hidden;
}
</style>