for_client/src/global/components/hc-page-header/index.vue

<template>
    <Suspense v-if="isBody">
        <Teleport to="#hc-header-page-name">
            <div class="hc-header-page-extra">
                <slot></slot>
            </div>
        </Teleport>
    </Suspense>
</template>

<script setup>
import {nextTick, ref} from "vue";
const isBody = ref(false)

//渲染完成
nextTick(()=> {
    //页面渲染完成后，再让 vue3 的 Teleport，挂载到指定节点
    isBody.value = true
})

</script>

<style lang="scss">
.hc-header-page-extra {
    position: relative;
    margin-left: 24px;
}
</style>