From 6c37a6906f68b5519ba938fb35b90f80455e7688 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 7 Nov 2017 02:22:17 -0600
Subject: [PATCH] [new feature] ImagePreview support startPosition (#286)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop

* [bugfix] NoticeBar text disappeared when page back

* [new feature] ImagePreview support startPosition

* fix: improve imagePreview test cases
---
 docs/examples-docs/zh-CN/image-preview.md | 26 +++++++++++++++++++++--
 packages/image-preview/image-preview.vue  |  8 ++++---
 packages/image-preview/index.js           |  3 ++-
 packages/swipe/index.vue                  |  4 ++++
 test/unit/specs/image-preview.spec.js     |  7 +++++-
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/docs/examples-docs/zh-CN/image-preview.md b/docs/examples-docs/zh-CN/image-preview.md
index 60cb65550..bc16e3fa4 100644
--- a/docs/examples-docs/zh-CN/image-preview.md
+++ b/docs/examples-docs/zh-CN/image-preview.md
@@ -16,12 +16,12 @@ import { ImagePreview } from 'packages';
 
 export default {
   methods: {
-    showImagePreview() {
+    showImagePreview(position) {
       ImagePreview([
         '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'
-      ]);
+      ], typeof position === 'number' ? position : 0);
     }
   }
 };
@@ -60,8 +60,30 @@ export default {
 ```
 :::
 
+#### 指定初始位置
+
+:::demo 指定初始位置
+```html
+<van-button @click="showImagePreview(1)">指定初始位置</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showImagePreview(startPosition) {
+      ImagePreview([
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ], startPosition);
+    }
+  }
+};
+```
+:::
+
 ### 方法参数
 
 | 参数名 | 说明 | 类型 |
 |-----------|-----------|-----------|
 | imageUrls | 需要预览的图片 | `Array` |
+| startPosition | 图片预览起始位置索引 | `Number` |
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index ea0f8e084..46434e058 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -7,7 +7,7 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <van-swipe>
+    <van-swipe :initialSwipe="startPosition">
       <van-swipe-item v-for="(item, index) in images" :key="index">
         <img class="van-image-preview__image" :src="item" >
       </van-swipe-item>
@@ -44,7 +44,8 @@ export default {
 
   data() {
     return {
-      images: []
+      images: [],
+      startPosition: 0
     };
   },
 
@@ -63,7 +64,8 @@ export default {
       this.deltaY = event.touches[0].clientY - this.touchStartY;
     },
 
-    onTouchEnd() {
+    onTouchEnd(event) {
+      event.preventDefault();
       // prevent long tap to close component
       const deltaTime = new Date() - this.touchStartTime;
       if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 095ed6788..59c56d841 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -12,12 +12,13 @@ const initInstance = () => {
   document.body.appendChild(instance.$el);
 };
 
-const ImagePreviewBox = images => {
+const ImagePreviewBox = (images, startPosition = 0) => {
   if (!instance) {
     initInstance();
   }
 
   instance.images = images;
+  instance.startPosition = startPosition;
   instance.value = true;
 };
 
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index f0af6ec74..760887a86 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -69,6 +69,10 @@ export default {
   watch: {
     swipes() {
       this.initialize();
+    },
+
+    initialSwipe() {
+      this.initialize();
     }
   },
 
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index f2b1ffc30..1177d544c 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -21,7 +21,12 @@ describe('ImagePreview', () => {
     ImagePreview(images);
     Vue.nextTick(() => {
       expect(document.querySelectorAll('.van-image-preview img').length).to.equal(3);
-      done();
+      ImagePreview(images.slice(0, 2));
+
+      Vue.nextTick(() => {
+        expect(document.querySelectorAll('.van-image-preview img').length).to.equal(2);
+        done();
+      });
     });
   });