vue3+vite前端项目，<script setup lang="ts">中，iframe嵌套路由，加载过程中出现白屏闪一下，如何在iframe加载期间，给其设置一个临时的背景颜色或渐变

在Vue3 + Vite的项目中，如果你在`<script setup lang="ts">`部分使用iframe嵌套并遇到页面加载时的短暂白屏问题，你可以通过在iframe元素上添加一些动态样式来处理这个过渡效果。这里提供一种解决方案：

1. 首先，在组件模板中找到插入iframe的地方，并为其添加一个ref属性，以便后续操作：

<template>
  <div ref="iframeWrapper">
    <iframe :src="iframeSrc" ref="iframe"></iframe>
  </div>
</template>

2. 然后在`setup`中处理iframe的加载状态，并在加载期间设置临时背景色或渐变：

<script setup lang="ts">
import { ref } from 'vue';

const iframeSrc = ref('your_iframe_url');
let isIframeLoaded = ref(false);

// 当iframe开始加载时设置背景色
const handleIframeLoad = () => {
  if (!isIframeLoaded.value) {
    // 设置一个过渡动画
    const fadeInColor = '#f0f0f0'; // 或者你想用的渐变色
    setTimeout(() => {
      if (window && document && document.body) {
        document.body.style.backgroundColor = fadeInColor;
      }
      isIframeLoaded.value = true; // 设置已加载标志
      // 当iframe完全加载后移除背景色
      window.addEventListener('message', (event) => {
        if (event.origin === iframeSrc.value) {
          document.body.style.backgroundColor = '';
          window.removeEventListener('message', handleIframeLoad);
        }
      });
    }, 500); // 例如500ms后检查是否加载完成
  }
};

// 在组件挂载时启动监听
onMounted(() => {
  handleIframeLoad();
});
</script>

在这个例子中，我们设置了初始加载时的灰色背景，当iframe接收到消息（通常是加载完成），我们会移除背景色。注意这只是一个简单的示例，实际应用中可能需要根据iframe的通信机制进行调整。