feat(components): [el-image] initialIndex (#4235)

docs/en-US/component/image.md

@@ -124,6 +124,7 @@ image/image-preview
 | alt                 | Native alt                                                                                                                                       | string               | -                                          | -                                                                      |
 | fit                 | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string               | fill / contain / cover / none / scale-down | -                                                                      |
 | hide-on-click-modal | When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode                                               | boolean              | true / false                               | false                                                                  |
+| initial-index       | The initial preview image index, less than the length of `url-list`                                                                              | number               | int                                        | 0                                                                      |
 | lazy                | Whether to use lazy load                                                                                                                         | boolean              | —                                          | false                                                                  |
 | preview-src-list    | allow big image preview                                                                                                                          | Array                | —                                          | -                                                                      |
 | referrer-policy     | Native referrerPolicy                                                                                                                            | string               | -                                          | -                                                                      |

packages/components/image/__tests__/image.spec.ts

@@ -76,6 +76,21 @@ describe('Image.vue', () => {
     expect(wrapper.find('img').classes()).toContain('el-image__preview')
   })
 
+  test('preview initial index test', async () => {
+    const wrapper = mount(Image, {
+      props: {
+        src: IMAGE_SUCCESS,
+        previewSrcList: new Array(3).fill(IMAGE_FAIL),
+        initialIndex: 1,
+      },
+    })
+    await doubleWait()
+    await wrapper.find('.el-image__inner').trigger('click')
+    expect(
+      wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
+    ).not.toContain('display: none')
+  })
+
   test('$attrs', async () => {
     const alt = 'this ia alt'
     const wrapper = mount(Image, {

packages/components/image/src/image.ts

@@ -36,6 +36,10 @@ export const imageProps = buildProps({
     type: Number,
     default: 2000,
   },
+  initialIndex: {
+    type: Number,
+    default: 0,
+  },
 } as const)
 export type ImageProps = ExtractPropTypes<typeof imageProps>
 

packages/components/image/src/image.vue

@@ -99,8 +99,8 @@ export default defineComponent({
     })
 
     const imageIndex = computed(() => {
-      const { src, previewSrcList } = props
-      let previewIndex = 0
+      const { src, previewSrcList, initialIndex } = props
+      let previewIndex = initialIndex
       const srcIndex = previewSrcList.indexOf(src)
       if (srcIndex >= 0) {
         previewIndex = srcIndex