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

packages/cell/test/__snapshots__/demo.spec.js.snap

@@ -93,11 +93,6 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-location-o van-cell__left-icon">
-        <!----></i>
-      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
     <div class="van-cell">
       <div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
         <!----></i>

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();
+});