[Improvement] ImagePreview: suppot onClose callback (#1589)

packages/image-preview/demo/index.vue

@@ -17,6 +17,12 @@
 <script>
 import { ImagePreview } from '../../../packages';
 
+const images = [
+  'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+  'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+  'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+];
+
 export default {
   i18n: {
     'zh-CN': {
@@ -33,11 +39,10 @@ export default {
 
   methods: {
     showImagePreview(position, timer) {
-      const instance = ImagePreview([
+      const instance = ImagePreview({
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+        images,
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        startPosition: typeof position === 'number' ? position : 0
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      });
-      ], typeof position === 'number' ? position : 0);
 
       if (timer) {
         setTimeout(() => {

packages/image-preview/en-US.md

@@ -17,12 +17,19 @@ ImagePreview([
 ]);
 ```
 
-#### Custom Start Position
+#### Custom config
+
 ```javascript
-ImagePreview([
+ImagePreview({
-  'https://img.yzcdn.cn/1.jpg',
+  images: [
-  'https://img.yzcdn.cn/2.jpg'
+    'https://img.yzcdn.cn/1.jpg',
-], 1);
+    'https://img.yzcdn.cn/2.jpg'
+  ],
+  startPosition: 1,
+  onClose() {
+    // do something
+  }
+});
 ```
 
 #### Close Manually
@@ -42,4 +49,6 @@ setTimeout(() => {
 
 | Attribute | Description | Type |
 |-----------|-----------|-----------|
-| imageUrls | Image URL list | `Array` |
+| images | Images URL list | `Array` |
+| startPosition | Start position | `Number` |
+| onClose | Close callback | `Function` |

packages/image-preview/index.js

@@ -10,16 +10,22 @@ const initInstance = () => {
   document.body.appendChild(instance.$el);
 };
 
-const ImagePreview = (images, startPosition = 0) => {
+const ImagePreview = (images, startPosition) => {
   if (!instance) {
     initInstance();
   }
 
-  instance.images = images;
+  const config = Array.isArray(images) ? { images, startPosition } : images;
-  instance.startPosition = startPosition;
+
+  instance.images = config.images;
+  instance.startPosition = config.startPosition || 0;
   instance.value = true;
   instance.$on('input', show => {
     instance.value = show;
+    if (!show) {
+      instance.$off('input');
+      config.onClose && config.onClose();
+    }
   });
 
   return instance;

packages/image-preview/test/index.spec.js

@@ -36,6 +36,26 @@ test('function call', done => {
   });
 });
 
+test('function call options', done => {
+  const onClose = jest.fn();
+  const instance = ImagePreview({
+    images,
+    startPostion: 1,
+    onClose
+  });
+
+  instance.$emit('input', true);
+  expect(onClose.mock.calls.length).toEqual(0);
+
+  Vue.nextTick(() => {
+    const wrapper = document.querySelector('.van-image-preview');
+    const swipe = wrapper.querySelector('.van-swipe__track');
+    triggerDrag(swipe, 0, 0);
+    expect(onClose.mock.calls.length).toEqual(1);
+    done();
+  });
+});
+
 test('register component', () => {
   Vue.use(ImagePreview);
   expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();

packages/image-preview/zh-CN.md

@@ -12,6 +12,8 @@ import { ImagePreview } from 'vant';
 
 #### 基础用法
 
+直接传入图片数组，即可展示图片预览
+
 ```javascript
 ImagePreview([
   'https://img.yzcdn.cn/1.jpg',
@@ -19,17 +21,27 @@ ImagePreview([
 ]);
 ```
 
-#### 指定初始位置
+#### 传入配置项
+
+通过传入配置对象，可以指定初始图片的位置、监听关闭事件
 
 ```javascript
-ImagePreview([
+ImagePreview({
-  'https://img.yzcdn.cn/1.jpg',
+  images: [
-  'https://img.yzcdn.cn/2.jpg'
+    'https://img.yzcdn.cn/1.jpg',
-], 1);
+    'https://img.yzcdn.cn/2.jpg'
+  ],
+  startPosition: 1,
+  onClose() {
+    // do something
+  }
+});
 ```
 
 #### 手动关闭
 
+通过实例上的 close 方法可以手动关闭图片预览
+
 ```javascript
 const instance = ImagePreview([
   'https://img.yzcdn.cn/1.jpg',
@@ -41,9 +53,10 @@ setTimeout(() => {
 }, 1000);
 ```
 
-### 方法参数
+### 配置项
 
 | 参数名 | 说明 | 类型 |
 |-----------|-----------|-----------|
-| imageUrls | 需要预览的图片 | `Array` |
+| images | 需要预览的图片 URL 数组 | `Array` |
 | startPosition | 图片预览起始位置索引 | `Number` |
+| onClose | 关闭时的回调函数 | `Function` |