承接上文

• 最终选用方法2实现需求

项目背景

项目框架为Taro, UI框架为 NutUI, 在项目初期每个页面我都会在最外层写一个app-config-provider组件包裹内容，app-config-provider为自行封装的一个组件。

app-config-provider源码

<template>
  <nut-config-provider class="custom--app-config-provider" :theme="appStore.theme" :theme-vars="themeVars">
    <view v-if="props.isStatusBarHeight"
          :style="{
             minHeight: systemInfo?.statusBarHeight + 'px',
             ...statusBarStyle
          }"></view>
    <slot></slot>


    <common-login-popup />
  </nut-config-provider>
</template>

<script setup>
import {useAppStore} from "../../store/app";
import {onMounted, ref} from "vue";
import Taro from "@tarojs/taro";
import CommonLoginPopup from "../common-login-popup/common-login-popup.vue";

const appStore = useAppStore()
const props = defineProps({
  // 是否使用顶部状态栏占位
  isStatusBarHeight: {
    type: Boolean,
    default: false
  },
  themeVars: {
    type: Object,
    default: () => {
    }
  },
  statusBarStyle: {
    type: Object,
    default: () => {
    }
  }
})
const systemInfo = ref({})

onMounted(() => {
  systemInfo.value = Taro.getSystemInfoSync()
})

</script>

<style lang="scss">
.custom--app-config-provider {
  position: relative;
}
</style>

app-config-provider使用

需要在最外层使用此组件，方便之后扩展

<app-config-provider>
    页面内容

</app-config-provider>

其中common-login-popup为全局弹窗组件，因前期有准备且页面不是很多，所以选用此方案实现全局登录弹窗。
之前探究的文章，试验了Skyline渲染模式，因项目时间问题，未做深入探究，但是感觉有戏。