MTP20_WEB_GLOBAL/src/packages/mobile/components/layouts/view/index.vue

<template>
    <div ref="viewRef" class="app-view" :class="[`bg-${background}`]">
        <slot name="header"></slot>
        <app-scroll-view :class="{ 'app-view__body': true, 'flex': flex }">
            <Loading class="app-view__loading" v-if="loading" />
            <slot></slot>
        </app-scroll-view>
        <slot name="footer"></slot>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted, PropType } from 'vue'
import { Loading } from 'vant'

defineProps({
    // 显示一个加载动画
    loading: {
        type: Boolean,
        default: false
    },
    // 是否启用弹性布局
    flex: {
        type: Boolean,
        default: false
    },
    // 背景颜色
    background: {
        type: String as PropType<'default' | 'primary'>,
        default: 'default'
    },
})

const emit = defineEmits(['ready'])
const viewRef = shallowRef()

onMounted(() => {
    emit('ready', viewRef.value)
})
</script>

<style lang="less">
@import './index.less';
</style>