feat(ImagePreview): add swipeTo method (#6596)

src/image-preview/ImagePreview.js

@@ -405,6 +405,14 @@ export default createComponent({
     onClosed() {
       this.$emit('closed');
     },
+
+    // @exposed-api
+    swipeTo(index, options) {
+      if (!this.$refs.swipe) {
+        return;
+      }
+      this.$refs.swipe.swipeTo(+index, options);
+    },
   },
 
   render() {

src/image-preview/README.md

@@ -147,6 +147,7 @@ export default {
 | closed `v2.5.6` | Triggered after closed | - |
 | change | Triggered when current image change | index: index of current image |
 | scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
+| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | void |
 
 ### Slots
 

src/image-preview/README.zh-CN.md

@@ -185,6 +185,7 @@ export default {
 | closed `v2.5.6` | 关闭且且动画结束后触发 | - |
 | change | 切换当前图片时触发 | index: 当前图片的索引 |
 | scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } |
+| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | void |
 
 ### Slots
 

src/image-preview/demo/index.vue

@@ -32,6 +32,27 @@
         <template #index>{{ t('index', index) }}</template>
       </van-image-preview>
     </demo-block>
+
+    <demo-block :title="t('swipeToPosition')">
+      <van-button type="primary" @click="swipeToPosition">
+        {{ t('swipeToPosition') }}
+      </van-button>
+      <van-image-preview
+        v-model="showPage"
+        :images="images"
+        @change="onChange"
+        ref="imagePreview"
+      >
+        <template #index>
+          <div class="block__wrap">
+            <div class="block">{{ t('index', index) }}</div>
+            <div class="block__btn" @click="swipeToSecond">
+              {{ t('swipeToThird') }}
+            </div>
+          </div>
+        </template>
+      </van-image-preview>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -53,6 +74,8 @@ export default {
       button3: '异步关闭',
       button4: '展示关闭按钮',
       componentCall: '组件调用',
+      swipeToPosition: '指定滑动位置',
+      swipeToThird: '前往第三页',
       index: (index) => `第${index + 1}页`,
     },
     'en-US': {
@@ -61,6 +84,8 @@ export default {
       button3: 'Async Close',
       button4: 'Show Close Icon',
       componentCall: 'Component Call',
+      swipeToPosition: 'swipe to position',
+      swipeToThird: 'swipe to third page',
       index: (index) => `Page: ${index}`,
     },
   },
@@ -68,6 +93,7 @@ export default {
   data() {
     return {
       show: false,
+      showPage: false,
       images,
       index: 0,
     };
@@ -78,6 +104,10 @@ export default {
       this.show = true;
     },
 
+    componentPage() {
+      this.showPage = true;
+    },
+
     onChange(index) {
       this.index = index;
     },
@@ -98,6 +128,9 @@ export default {
         }, timer);
       }
     },
+    swipeToSecond() {
+      this.$refs.imagePreview.swipeTo(2);
+    },
   },
 };
 </script>
@@ -111,5 +144,15 @@ export default {
   .van-button {
     margin-left: @padding-md;
   }
+
+  .block {
+    flex: 1;
+    text-align: center;
+
+    &__wrap {
+      display: flex;
+      width: 300px;
+    }
+  }
 }
 </style>

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

@@ -309,3 +309,24 @@ test('get container with component call', () => {
   wrapper.vm.getContainer = null;
   expect(wrapper.element).toEqual(wrapper.element);
 });
+
+test('swipeTo method', async () => {
+  const wrapper = mount({
+    template: `
+    <div>
+      <van-image-preview ref="imagePreview" :value="true" :images="images">
+      </van-image-preview>
+    </div>
+    `,
+    data() {
+      return {
+        images,
+      };
+    },
+  });
+  const { imagePreview } = wrapper.vm.$refs;
+  imagePreview.swipeTo(2);
+
+  await later(100);
+  expect(imagePreview.active).toEqual(2);
+});

types/image-preview.d.ts

@@ -1,5 +1,6 @@
 import { VanComponent } from './component';
 import { VanPopupMixin } from './mixins/popup';
+import { SwipeToOptions } from './swipe';
 
 export type ImagePreviewOptions =
   | string[]
@@ -21,6 +22,7 @@ export type ImagePreviewOptions =
       getContainer?: string | (() => Element);
       onClose?: () => void;
       onChange?: (index: number) => void;
+      swipeTo(index: number, options?: SwipeToOptions): void;
     };
 
 export class VanImagePreview extends VanPopupMixin {