Image: Perfect picture preview behavior (#16985) (#17375)

* Perfect picture preview function

* update test

packages/image/src/image-viewer.vue

@@ -87,12 +87,16 @@ export default {
     onClose: {
       type: Function,
       default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
     }
   },
 
   data() {
     return {
-      index: 0,
+      index: this.initialIndex,
       isShow: false,
       infinite: true,
       loading: false,

packages/image/src/main.vue

@@ -15,7 +15,9 @@
       :src="src"
       :style="imageStyle"
       :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
-    <image-viewer :z-index="zIndex" v-if="preview && showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+    <template v-if="preview">
+      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-show="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+    </template>
   </div>
 </template>
 
@@ -88,6 +90,9 @@
       preview() {
         const { previewSrcList } = this;
         return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+      },
+      imageIndex() {
+        return this.previewSrcList.indexOf(this.src);
       }
     },
 

test/unit/specs/image.spec.js

@@ -127,10 +127,12 @@ describe('Image', () => {
     await wait();
     vm.$el.querySelector('.el-image__inner').click();
     await wait();
-    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.exist;
+
+    const $wrapper = vm.$el.querySelector('.el-image-viewer__wrapper');
+    expect($wrapper).to.exist;
     vm.$el.querySelector('.el-image-viewer__close').click();
     await wait(1000);
-    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.not.exist;
+    expect($wrapper.style.display).to.equal('none');
   });
 });