diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 5200aba31..2f7407ff6 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -28,9 +28,10 @@ Previewable image. ### events -| Events Name | Description | Arguments | Version | -| ----------- | -------------------- | ---------------------- | ------- | -| error | Load failed callback | (event: Event) => void | 3.2.0 | +| Events Name | Description | Arguments | Version | +| ----------- | ------------------------ | ---------------------- | ------- | +| error | Load failed callback | (event: Event) => void | 3.2.0 | +| load | Load successful callback | (event: Event) => void | 4.3.0 | ### previewType diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index b5a2f148f..9c8f368b2 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -32,6 +32,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA | 事件名称 | 说明 | 回调参数 | 版本 | | -------- | ------------ | ---------------------- | ----- | | error | 加载错误回调 | (event: Event) => void | 3.2.0 | +| load | 加载成功回调 | (event: Event) => void | 4.3.0 | ### previewType diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx index 643708dc5..12477f8d7 100644 --- a/components/vc-image/src/Image.tsx +++ b/components/vc-image/src/Image.tsx @@ -50,6 +50,9 @@ export const imageProps = () => ({ onError: { type: Function as PropType, }, + onLoad: { + type: Function as PropType, + }, }); export type ImageProps = Partial>; export type ImageStatus = 'normal' | 'error' | 'loading'; @@ -69,7 +72,7 @@ const ImageInternal = defineComponent({ name: 'VcImage', inheritAttrs: false, props: imageProps(), - emits: ['click', 'error'], + emits: ['click', 'error', 'load'], setup(props, { attrs, slots, emit }) { const prefixCls = computed(() => props.prefixCls); const previewPrefixCls = computed(() => `${prefixCls.value}-preview`); @@ -118,8 +121,9 @@ const ImageInternal = defineComponent({ } = groupContext; const currentId = ref(uuid++); const canPreview = computed(() => props.preview && !isError.value); - const onLoad = () => { + const onLoad = (e: Event) => { status.value = 'normal'; + emit('load', e); }; const onError = (e: Event) => { status.value = 'error'; @@ -158,16 +162,6 @@ const ImageInternal = defineComponent({ } }; - const img = ref(null); - watch( - () => img, - () => { - if (status.value !== 'loading') return; - if (img.value.complete && (img.value.naturalWidth || img.value.naturalHeight)) { - onLoad(); - } - }, - ); let unRegister = () => {}; onMounted(() => { watch( @@ -266,7 +260,6 @@ const ImageInternal = defineComponent({ src: fallback, } : { onLoad, onError, src: imgSrc })} - ref={img} /> {status.value === 'loading' && (