github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(image): add load event

pull/8005/head
黄明富 2025-01-11 10:41:26 +08:00
parent 45c7109212
commit 9c15bcc33e
3 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/image/index.en-US.md
View File

@ -29,8 +29,9 @@ Previewable image.
### events ### events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
| ----------- | -------------------- | ---------------------- | ------- | | ----------- | ------------------------ | ---------------------- | ------- |
| error | Load failed callback | (event: Event) => void | 3.2.0 | | error | Load failed callback | (event: Event) => void | 3.2.0 |
| load | Load successful callback | (event: Event) => void | 4.3.0 |
### previewType ### previewType

1
components/image/index.zh-CN.md
View File

@ -32,6 +32,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ------------ | ---------------------- | ----- | | -------- | ------------ | ---------------------- | ----- |
| error | 加载错误回调 | (event: Event) => void | 3.2.0 | | error | 加载错误回调 | (event: Event) => void | 3.2.0 |
| load | 加载成功回调 | (event: Event) => void | 4.3.0 |
### previewType ### previewType

19
components/vc-image/src/Image.tsx
View File

@ -50,6 +50,9 @@ export const imageProps = () => ({
onError: { onError: {
type: Function as PropType<HTMLImageElement['onerror']>, type: Function as PropType<HTMLImageElement['onerror']>,
}, },
onLoad: {
type: Function as PropType<HTMLImageElement['onload']>,
},
}); });
export type ImageProps = Partial<ReturnType<typeof imageProps>>; export type ImageProps = Partial<ReturnType<typeof imageProps>>;
export type ImageStatus = 'normal' | 'error' | 'loading'; export type ImageStatus = 'normal' | 'error' | 'loading';
@ -69,7 +72,7 @@ const ImageInternal = defineComponent({
name: 'VcImage', name: 'VcImage',
inheritAttrs: false, inheritAttrs: false,
props: imageProps(), props: imageProps(),
emits: ['click', 'error'], emits: ['click', 'error', 'load'],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit }) {
const prefixCls = computed(() => props.prefixCls); const prefixCls = computed(() => props.prefixCls);
const previewPrefixCls = computed(() => `${prefixCls.value}-preview`); const previewPrefixCls = computed(() => `${prefixCls.value}-preview`);
@ -118,8 +121,9 @@ const ImageInternal = defineComponent({
} = groupContext; } = groupContext;
const currentId = ref(uuid++); const currentId = ref(uuid++);
const canPreview = computed(() => props.preview && !isError.value); const canPreview = computed(() => props.preview && !isError.value);
const onLoad = () => { const onLoad = (e: Event) => {
status.value = 'normal'; status.value = 'normal';
emit('load', e);
}; };
const onError = (e: Event) => { const onError = (e: Event) => {
status.value = 'error'; status.value = 'error';
@ -158,16 +162,6 @@ const ImageInternal = defineComponent({
} }
}; };
const img = ref<HTMLImageElement>(null);
watch(
() => img,
() => {
if (status.value !== 'loading') return;
if (img.value.complete && (img.value.naturalWidth || img.value.naturalHeight)) {
onLoad();
}
},
);
let unRegister = () => {}; let unRegister = () => {};
onMounted(() => { onMounted(() => {
watch( watch(
@ -266,7 +260,6 @@ const ImageInternal = defineComponent({
src: fallback, src: fallback,
} }
: { onLoad, onError, src: imgSrc })} : { onLoad, onError, src: imgSrc })}
ref={img}
/> />
{status.value === 'loading' && ( {status.value === 'loading' && (