feat(Uploader): add closeImagePreview method (#4901)

src/field/README.md

@@ -181,7 +181,7 @@ Field support all native events of input tag
 
 ### Methods
 
-Use ref to get field instance and call instance methods
+Use ref to get Field instance and call instance methods
 
 | Name | Description | Attribute | Return value |
 |------|------|------|------|

src/field/README.zh-CN.md

@@ -187,7 +187,7 @@ Vue.use(Field);
 
 ### 方法
 
-通过 ref 可以获取到 field 实例并调用实例方法
+通过 ref 可以获取到 Field 实例并调用实例方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 |------|------|------|------|

src/uploader/README.md

@@ -157,3 +157,11 @@ export default {
 | file | Result contains File object |
 | text | Result contains File object and text content |
 | dataUrl | Result contains File object and base64 content |
+
+### Methods
+
+Use ref to get Uploader instance and call instance methods
+
+| Name | Description | Attribute | Return value |
+|------|------|------|------|
+| closeImagePreview | Close full screen image preview | - | - |

src/uploader/README.zh-CN.md

@@ -177,3 +177,11 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
 | file | 结果仅包含 File 对象 |
 | text | 结果包含 File 对象，以及文件的文本内容 |
 | dataUrl | 结果包含 File 对象，以及文件对应的 base64 编码 |
+
+### 方法
+
+通过 ref 可以获取到 Uploader 实例并调用实例方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+|------|------|------|------|
+| closeImagePreview | 关闭全屏的图片预览 | - | - |

src/uploader/index.js

@@ -197,7 +197,7 @@ export default createComponent({
       const imageFiles = this.fileList.filter(item => isImageFile(item));
       const imageContents = imageFiles.map(item => item.content || item.url);
 
-      ImagePreview({
+      this.imagePreview = ImagePreview({
         images: imageContents,
         closeOnPopstate: true,
         startPosition: imageFiles.indexOf(item),
@@ -207,6 +207,12 @@ export default createComponent({
       });
     },
 
+    closeImagePreview() {
+      if (this.imagePreview) {
+        this.imagePreview.close();
+      }
+    },
+
     renderPreviewItem(item, index) {
       const DeleteIcon = (
         <Icon

src/uploader/test/index.spec.js

@@ -359,6 +359,24 @@ it('click to preview image', () => {
   expect(imagePreviewNode2.querySelectorAll('.van-image-preview__image').length).toEqual(1);
 });
 
+it('closeImagePreview method', () => {
+  const close = jest.fn();
+  const wrapper = mount(Uploader, {
+    mocks: {
+      imagePreview: {
+        close
+      }
+    }
+  });
+
+  wrapper.vm.closeImagePreview();
+  expect(close).toHaveBeenCalledTimes(1);
+
+  // should not throw error
+  const wrapper2 = mount(Uploader);
+  wrapper2.vm.closeImagePreview();
+});
+
 it('click-preview event', () => {
   const wrapper = mount(Uploader, {
     propsData: {