feat(Uploader): add click-preview event (#4206)

src/uploader/README.md

@@ -133,6 +133,7 @@ export default {
 | Event | Description | Arguments |
 |------|------|------|
 | oversize | Triggered when file size over limit | Same as after-read |
+| click-preview | Triggered when click preview image | Same as after-read |
 | delete | Triggered when delete preview file | file |
 
 ### Slots
@@ -141,7 +142,7 @@ export default {
 |------|------|
 | default | Custom icon |
 
-### Parematers of before-read、after-read
+### Parematers of before-read、after-read、before-delete
 
 | Attribute | Description | Type |
 |------|------|------|

src/uploader/README.zh-CN.md

@@ -149,6 +149,7 @@ export default {
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | oversize | 文件大小超过限制时触发 | 同`after-read` |
+| click-preview | 点击预览图时触发 | 同`after-read` | 
 | delete | 删除文件预览时触发 | file: 被删除的文件对象 |
 
 ### Slots

src/uploader/demo/index.vue

@@ -79,8 +79,8 @@ export default {
       return true;
     },
 
-    afterRead(file) {
+    afterRead(file, detail) {
-      console.log(file);
+      console.log(file, detail);
     }
   }
 };

src/uploader/index.js

@@ -193,13 +193,22 @@ export default createComponent({
       });
     },
 
+    onClickPreview(file) {
+      this.$emit('click-preview', file, this.detail);
+    },
+
     renderPreview() {
       if (!this.previewImage) {
         return;
       }
 
       return this.fileList.map((item, index) => (
-        <div class={bem('preview')}>
+        <div
+          class={bem('preview')}
+          onClick={() => {
+            this.onClickPreview(item);
+          }}
+        >
           {isImageFile(item) ? (
             <Image
               fit={this.imageFit}

src/uploader/test/index.spec.js

@@ -343,3 +343,16 @@ it('click to preview image', () => {
   const imagePreviewNode2 = document.querySelector('.van-image-preview');
   expect(imagePreviewNode2).toMatchSnapshot();
 });
+
+it('click-preview event', () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      previewFullImage: false,
+      fileList: [{ url: IMAGE }, { url: PDF }]
+    }
+  });
+
+  wrapper.find('.van-image').trigger('click');
+  expect(wrapper.emitted('click-preview')[0][0]).toEqual({ url: IMAGE });
+  expect(wrapper.emitted('click-preview')[0][1]).toEqual({ name: '' });
+});