fix: 修复描述文字加载慢导致样式闪出的问题

Author: Tyh2001

packages/fighting-components/image/src/image.vue

@@ -20,6 +20,7 @@
 
     <div
       v-if="caption"
+      v-show="isLoadOk"
       class="f-image-caption"
       :style="{
         width: width || `${captionWidth}px`,
@@ -67,6 +68,7 @@
   const emit = defineEmits(Emits)
 
   const isError: Ref<boolean> = ref<boolean>(true)
+  const isLoadOk: Ref<boolean> = ref<boolean>(false)
   const isPreviewListShow: Ref<boolean> = ref<boolean>(false)
   const captionWidth: Ref<number> = ref<number>(0)
   const FImageImg: Ref<HTMLImageElement | null> = ref<HTMLImageElement | null>(
@@ -99,6 +101,7 @@
       width: number
     ): void => {
       isError.value = params
+      isLoadOk.value = params
       captionWidth.value = width
     }
 

start/src/App.vue

@@ -3,18 +3,20 @@
   <f-image
     root-margin="100px"
     src="https://tianyuhao.cn/images/auto/1.png"
+    err-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
     :draggable="false"
     lazy
     alt="ada"
     :preview-list="listImg"
     :select="true"
     :preview-z-index="10022"
+    :modal-close="false"
+    :show-close-btn="false"
     :preview-show-option="false"
     round="20px"
     preview-round="120px"
-    caption="回到家啊回到家萨的好时机啊的话苏家爱华打算结婚的洒酒大数据坎大哈时间坎大哈时间的撒健康大数据坎大哈事件扩大化"
+    caption="回到家啊回到家萨的好时机啊"
     :preview-show-index="32"
-    block
   />
   <span>12</span>
 </template>
@@ -47,11 +49,6 @@
 </script>
 
 <style>
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-  }
   .list {
     width: 300px;
     height: 200px;