From 3fc96e15f81403685ad96429451b2dafaeefc9e9 Mon Sep 17 00:00:00 2001
From: w2xi <57785259+w2xi@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:39:29 +0800
Subject: [PATCH] fix(components): [image] make `show-progress` prop available
 (#20590)

fix(components): [image] make `show-progress` prop available (close #20588)
---
 .../components/image/__tests__/image.test.tsx | 57 +++++++++++++++++++
 packages/components/image/src/image.vue       |  2 +-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/components/image/__tests__/image.test.tsx b/packages/components/image/__tests__/image.test.tsx
index 87c5e920e8..b1b8c7a75f 100644
--- a/packages/components/image/__tests__/image.test.tsx
+++ b/packages/components/image/__tests__/image.test.tsx
@@ -204,4 +204,61 @@ describe('Image.vue', () => {
     ).not.toContain('display: none')
   })
   //@todo lazy image test
+
+  test('`show-progress` prop to control whether to display progress', async () => {
+    const url = IMAGE_SUCCESS
+    const srcList = Array.from<string>({ length: 3 }).fill(IMAGE_SUCCESS)
+    const wrapper = _mount(
+      `
+      <el-image
+        ref="imageRef"
+        :src="url"
+        :preview-src-list="srcList"
+        :show-progress="false"
+      />`,
+      () => ({
+        url,
+        srcList,
+      })
+    )
+    await doubleWait()
+    wrapper.vm.$refs.imageRef.showPreview()
+    await doubleWait()
+    expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(false)
+
+    wrapper.setProps({ showProgress: true })
+    await doubleWait()
+    expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
+  })
+
+  test('progress slot', async () => {
+    const url = IMAGE_SUCCESS
+    const srcList = Array.from<string>({ length: 3 }).fill(IMAGE_SUCCESS)
+    const wrapper = _mount(
+      `
+      <el-image
+        ref="imageRef"
+        :src="url"
+        :preview-src-list="srcList"
+      >
+        <template #progress="{ activeIndex, total }">
+          <div>{{ activeIndex + 1 }} - {{ total }}</div>
+        </template>
+      </el-image>`,
+      () => ({
+        url,
+        srcList,
+      })
+    )
+    await doubleWait()
+    wrapper.vm.$refs.imageRef.showPreview()
+    await doubleWait()
+    expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
+    expect(wrapper.find('.el-image-viewer__progress').text()).toBe('1 - 3')
+
+    // progress slot's priority is higher than `show-progress` prop
+    wrapper.setProps({ showProgress: false })
+    await doubleWait()
+    expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
+  })
 })
diff --git a/packages/components/image/src/image.vue b/packages/components/image/src/image.vue
index b8823f1682..40e647b23c 100644
--- a/packages/components/image/src/image.vue
+++ b/packages/components/image/src/image.vue
@@ -43,7 +43,7 @@
         <div v-if="$slots.viewer">
           <slot name="viewer" />
         </div>
-        <template #progress="progress">
+        <template v-if="$slots.progress" #progress="progress">
           <slot name="progress" v-bind="progress" />
         </template>
         <template #toolbar="toolbar">