From f52890cfd6996f2b70f20b4444d74e3906f94179 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Thu, 25 Jul 2019 19:01:01 +0800
Subject: [PATCH] [new feature] ImagePreview: add swipe-duration prop (#3963)

---
 src/image-preview/ImagePreview.js | 5 +++++
 src/image-preview/README.md       | 2 ++
 src/image-preview/README.zh-CN.md | 2 ++
 src/image-preview/demo/index.vue  | 2 ++
 src/image-preview/index.js        | 1 +
 5 files changed, 12 insertions(+)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index 29106040a..d01c81b2e 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -38,6 +38,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    swipeDuration: {
+      type: Number,
+      default: 500
+    },
     overlay: {
       type: Boolean,
       default: true
@@ -267,6 +271,7 @@ export default createComponent({
       <Swipe
         ref="swipe"
         loop={this.loop}
+        duration={this.swipeDuration}
         indicatorColor="white"
         initialSwipe={this.startPosition}
         showIndicators={this.showIndicators}
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index c5f81fa14..147d5afe8 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -94,6 +94,7 @@ export default {
 | showIndex | Whether to show index | `boolean` | `true` |
 | showIndicators | Whether to show indicators | `boolean` | `false` |
 | loop | Whether to enable loop | `boolean` | `true` |
+| swipeDuration | Animation duration (ms) | `number` | `500` |
 | onClose | Triggered when close | `Function` | - |
 | onChange | Triggered when current image change | `Function` | - |
 | closeOnPopstate | Whether to close when popstate | `boolean` | `false` |
@@ -112,6 +113,7 @@ export default {
 | show-index | Whether to show index | `boolean` | `true` |
 | show-indicators | Whether to show indicators | `boolean` | `false` |
 | loop | Whether to enable loop | `boolean` | `true` |
+| swipe-duration | Animation duration (ms) | `number` | `500` |
 | async-close | Whether to enable async close | `boolean` | `false` |
 | close-on-popstate | Whether to close when popstate | `boolean` | `false` |
 | class-name | Custom className | `any` | - |
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 0559c9202..74ce11f93 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -106,6 +106,7 @@ export default {
 | showIndex | 是否显示页码 | `boolean` | `true` | - |
 | showIndicators | 是否显示轮播指示器 | `boolean` | `false` | - |
 | loop | 是否开启循环播放 | `boolean` | `true` | - |
+| swipeDuration | 动画时长，单位为 ms | `number` | `500` | - |
 | onClose | 关闭时的回调函数 | `Function` | - | - |
 | onChange | 切换图片时的回调函数，回调参数为当前索引 | `Function` | - | 2.0.3 |
 | asyncClose | 是否开启异步关闭 | `boolean` | `false` | - |
@@ -126,6 +127,7 @@ export default {
 | show-index | 是否显示页码 | `boolean` | `true` | 1.3.4 |
 | show-indicators | 是否显示轮播指示器 | `boolean` | `false` | 1.3.10 |
 | loop | 是否开启循环播放 | `boolean` | `true` | 1.4.4 |
+| swipe-duration | 动画时长，单位为 ms | `number` | `500` | - |
 | async-close | 是否开启异步关闭 | `boolean` | `false` | 1.4.8 |
 | close-on-popstate | 是否在页面回退时自动关闭 | `boolean` | `false` |
 | class-name | 自定义类名 | `any` | - | 1.5.2 |
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index 604d01569..c7c0356be 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -37,6 +37,7 @@
       <van-image-preview
         v-model="show"
         :images="images"
+        :swipe-duration="300"
         @change="onChange"
       >
         <template #index>{{ $t('index', index) }}</template>
@@ -93,6 +94,7 @@ export default {
     showImagePreview(position, timer) {
       const instance = ImagePreview({
         images,
+        swipeDuration: 300,
         asyncClose: !!timer,
         closeOnPopstate: true,
         startPosition: typeof position === 'number' ? position : 0
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index c96e9ca88..e2ba24945 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -7,6 +7,7 @@ let instance;
 const defaultConfig = {
   images: [],
   loop: true,
+  swipeDuration: 500,
   value: true,
   minZoom: 1 / 3,
   maxZoom: 3,