[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

@@ -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` |

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) {

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;
 };
 

packages/swipe/index.vue

@@ -69,6 +69,10 @@ export default {
   watch: {
     swipes() {
       this.initialize();
+    },
+
+    initialSwipe() {
+      this.initialize();
     }
   },
 

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