[new feature] Uploader: support click to preview image (#3603)

packages/uploader/index.js

@@ -2,6 +2,7 @@ import { use, suffixPx } from '../utils';
 import { toArray, readFile, isOversize } from './utils';
 import Icon from '../icon';
 import Image from '../image';
+import ImagePreview from '../image-preview';
 
 const [sfc, bem] = use('uploader');
 
@@ -135,6 +136,13 @@ export default sfc({
       }
     },
 
+    onPreviewImage(startPosition) {
+      ImagePreview({
+        images: this.fileList.map(file => file.content),
+        startPosition
+      });
+    },
+
     renderPreview() {
       if (!this.previewImage) {
         return;
@@ -148,6 +156,9 @@ export default sfc({
             class={bem('preview-image')}
             width={this.previewSize}
             height={this.previewSize}
+            onClick={() => {
+              this.onPreviewImage(index);
+            }}
           />
           <Icon
             name="delete"

packages/uploader/test/index.spec.js

@@ -257,3 +257,24 @@ it('delete preview image', async () => {
   expect(wrapper).toMatchSnapshot();
   expect(wrapper.emitted('delete')[0]).toBeTruthy();
 });
+
+it('click to preview image', async () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      fileList: [],
+      previewSize: 30
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
+    }
+  });
+
+  wrapper.vm.onChange(file);
+  await later();
+
+  wrapper.find('.van-image').trigger('click');
+
+  expect(document.querySelector('.van-image-preview')).toBeTruthy();
+});