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

在Vite + Vue3项目中，如果你遇到iframe加载时的白屏闪烁问题，特别是在路由切换或内容加载时，你可以尝试通过一些技巧改善用户体验。为了给iframe设置一个临时背景颜色或渐变，直到内容加载完成，可以这样做：

1. **CSS 动画遮罩**:
在Vue组件里，创建一个新的`<style>`标签并添加以下CSS，这会在iframe加载前显示一个半透明的动画背景：

   <style>
     .loading-mask {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(0, 0, 0, 0.5); /* 或者一个渐变色 */
       z-index: 9999; /* 确保高于iframe */
       transition: opacity 0.3s ease;
     }

     iframe[data-loaded] {
       opacity: 1;
       pointer-events: auto;
       transition: none;
     }

     /* 当iframe已加载完 */
     iframe[data-loaded] + .loading-mask {
       opacity: 0;
       display: none;
     }
   </style>

2. **Vue实例中监听iframe状态**:
在你的Vue组件中，监听`<iframe>`的`load`事件，当iframe内容完全加载完毕后，为元素添加`data-loaded`属性，然后隐藏遮罩层：

   <template>
     <div class="loading-mask" v-if="!isContentLoaded"></div>
     <iframe :src="iframeSrc" ref="iframeRef" @load="handleIframeLoad" data-loaded></iframe>
   </template>

   <script>
   export default {
     data() {
       return {
         isContentLoaded: false,
       };
     },
     mounted() {
       this.handleIframeLoad();
     },
     methods: {
       handleIframeLoad() {
         const iframe = this.$refs.iframeRef;
         if (iframe.contentDocument && iframe.contentDocument.body) {
           // 判断是否已加载完成
           this.isContentLoaded = true;
           setTimeout(() => {
             this.$refs.loadingMask.classList.add('data-loaded');
           }, 0);
         }
       },
     },
   };
   </script>