fix: 优化 callback 的类型

Author: Tyh2001

packages/fighting-components/image/src/PreviewList.ts

@@ -28,6 +28,10 @@ export const Props = {
   previewRound: {
     type: String,
     default: (): string => ''
+  },
+  width: {
+    type: String,
+    default: (): string => ''
   }
 } as const
 

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

@@ -22,6 +22,7 @@
       v-if="caption"
       class="f-image-caption"
       :style="{
+        width: width || `${captionWidth}px`,
         color: captionColor,
         borderBottomLeftRadius: round,
         borderBottomRightRadius: round
@@ -40,6 +41,7 @@
       :modalClose="modalClose"
       :showCloseBtn="showCloseBtn"
       :previewRound="previewRound"
+      :width="width"
       @close="onClose"
     />
   </div>
@@ -56,13 +58,17 @@
   import { onMounted, ref, defineAsyncComponent, computed } from 'vue'
   import { loadImage } from '@fighting-design/fighting-utils'
   import type { Ref, ComputedRef } from 'vue'
-  import type { ordinaryFunctionInterface } from '@fighting-design/fighting-type'
+  import type {
+    ordinaryFunctionInterface,
+    callbackInterface
+  } from '@fighting-design/fighting-type'
 
   const prop = defineProps(Props)
   const emit = defineEmits(Emits)
 
   const isError: Ref<boolean> = ref<boolean>(true)
   const isPreviewListShow: Ref<boolean> = ref<boolean>(false)
+  const captionWidth: Ref<number> = ref<number>(0)
   const FImageImg: Ref<HTMLImageElement | null> = ref<HTMLImageElement | null>(
     null
   )
@@ -88,9 +94,15 @@
 
   onMounted((): void => {
     const node: HTMLImageElement = FImageImg.value as HTMLImageElement
-    loadImage(node, prop, emit, (params: boolean): void => {
+    const callback: callbackInterface = (
+      params: boolean,
+      width: number
+    ): void => {
       isError.value = params
-    })
+      captionWidth.value = width
+    }
+
+    loadImage(node, prop, emit, callback)
   })
 </script>
 

packages/fighting-type/image.d.ts

@@ -8,15 +8,15 @@ export interface loadImageInterface {
     node: HTMLImageElement,
     prop: propsInterface,
     emit: Function,
-    callback: Function
+    callback: callbackInterface
   ): void
 }
 
 export interface LoadInterface {
   img: HTMLImageElement
   props: propsInterface
   emit: Function
-  callback: Function
+  callback: callbackInterface
   loadCreateImg(): void
   loadNextImg(): void
   onerror(evt: Event): void
@@ -59,3 +59,7 @@ export interface switchImageInterface {
 export interface optionClickInterface {
   (evt: PointerEvent): void
 }
+
+export interface callbackInterface {
+  (params: boolean, width: number): void
+}

packages/fighting-type/index.ts

@@ -10,7 +10,8 @@ export type {
   callbackType,
   btnClickInterface,
   switchImageInterface,
-  optionClickInterface
+  optionClickInterface,
+  callbackInterface
 } from './image'
 export type { installInterface, mainVNodeInterface } from './install'
 export type { onClickInterface, ordinaryFunctionInterface } from './auto'

packages/fighting-utils/loadImage.ts

@@ -2,7 +2,8 @@ import type {
   LazyInterface,
   LoadInterface,
   loadImageInterface,
-  propsInterface
+  propsInterface,
+  callbackInterface
 } from '@fighting-design/fighting-type'
 
 /**
@@ -12,12 +13,12 @@ class Load implements LoadInterface {
   img: HTMLImageElement
   props: propsInterface
   emit: Function
-  callback: Function
+  callback: callbackInterface
   constructor(
     img: HTMLImageElement,
     props: propsInterface,
     emit: Function,
-    callback: Function
+    callback: callbackInterface
   ) {
     this.img = img
     this.props = props
@@ -40,10 +41,11 @@ class Load implements LoadInterface {
       return this.loadNextImg()
     }
     this.emit('error', evt)
-    this.callback(false)
+    this.callback(false, 0)
   }
   onload(evt: Event): void {
     this.emit('load', evt)
+    this.callback(true, this.img.width)
   }
   // 如果加载 src 失败，则进入这里，加载 err-src 的图片地址
   loadNextImg(): void {
@@ -53,7 +55,7 @@ class Load implements LoadInterface {
     newImg.addEventListener('error', (evt: Event): void => {
       // 进入这里则说明 err-src 的图片也加载失败了
       this.emit('error', evt)
-      this.callback(false)
+      this.callback(false, 0)
     })
 
     newImg.addEventListener('load', (evt: Event): void => {
@@ -72,7 +74,7 @@ class Lazy extends Load implements LazyInterface {
     img: HTMLImageElement,
     props: propsInterface,
     emit: Function,
-    callback: Function
+    callback: callbackInterface
   ) {
     super(img, props, emit, callback)
   }
@@ -111,7 +113,7 @@ export const loadImage: loadImageInterface = (
   node: HTMLImageElement,
   prop: propsInterface,
   emit: Function,
-  callback: Function
+  callback: callbackInterface
 ): void => {
   if (prop.lazy) {
     const lazy: Lazy = new Lazy(node, prop, emit, callback)

start/src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div style="height: 1000px"></div>
   <f-image
-    width="200px"
     root-margin="100px"
     src="https://tianyuhao.cn/images/auto/1.png"
     :draggable="false"
@@ -48,6 +47,11 @@
 </script>
 
 <style>
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+  }
   .list {
     width: 300px;
     height: 200px;