Просмотр исходного кода

fix(FrameElement): 修复iframe加载时加载动画不显示的问题

添加frameloading状态变量来控制加载动画的显示,确保在iframe加载过程中始终显示加载动画
lsc 1 неделя назад
Родитель
Сommit
fba74f7457
1 измененных файлов с 8 добавлено и 2 удалено
  1. 8 2
      src/views/components/element/FrameElement/BaseFrameElement.vue

+ 8 - 2
src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -22,7 +22,7 @@
       :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div class="element-content">
-        <div class="fullscreen-spin mask" v-if="!elementInfo.isDone && !isThumbnail && isVisible">
+        <div class="fullscreen-spin mask" v-if="(!elementInfo.isDone && !isThumbnail && isVisible) || frameloading">
           <div class="spin">
             <div class="spinner"></div>
           </div>
@@ -170,10 +170,12 @@ const getTypeLabel = (type: number): string => {
   return (key ? lang[key] : lang.ssUnknown) as string
 }
 
+const frameloading = ref(false)
+
 // 处理iframe加载完成事件
 const handleIframeLoad = async (event: Event) => {
   const iframe = event.target as HTMLIFrameElement
-
+  frameloading.value = true
   try {
     // 等待iframe完全加载
     await nextTick()
@@ -217,6 +219,7 @@ const handleIframeLoad = async (event: Event) => {
               console.error(`获取 ${jsFile.id} 失败:`, fetchError)
             }
           }
+          frameloading.value = false
 
           // 可选:在iframe中执行一些初始化代码
           try {
@@ -226,16 +229,19 @@ const handleIframeLoad = async (event: Event) => {
               `)
           }
           catch (evalError) {
+            frameloading.value = false
             console.warn('无法在iframe中执行代码:', evalError)
           }
         }
       }
       else {
+        frameloading.value = false
         console.warn('无法访问iframe内容,可能是跨域限制')
       }
     }, 1000)
   }
   catch (error) {
+    frameloading.value = false
     console.error('注入JS到iframe失败:', error)
   }
 }