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