breaking change(ImagePreview): remove asyncClose and add beforeClose

docs/markdown/migrate-from-v2.zh-CN.md

@@ -175,6 +175,10 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位
 
 - `before-close` 属性用法调整，不再传入 done 函数，而是通过返回 Promise 来控制
 
+#### ImagePreview
+
+- 移除 `async-close` 属性，可以使用新增的 `before-close` 属性代替
+
 #### Picker
 
 - 移除 change 事件的第一个参数（picker 实例）

src/dialog/demo/index.vue

@@ -45,7 +45,7 @@ export default {
       alert1: 'Alert',
       alert2: 'Alert without title',
       confirm: 'Confirm dialog',
-      beforeClose: 'Async Close',
+      beforeClose: 'Before Close',
       roundButton: 'Round Button Style',
       componentCall: 'Component Call',
     },

src/image-preview/ImagePreview.js

@@ -1,6 +1,7 @@
 // Utils
 import { inBrowser } from '../utils';
 import { bem, createComponent } from './shared';
+import { callInterceptor } from '../utils/interceptor';
 
 // Mixins
 import { TouchMixin } from '../mixins/touch';
@@ -25,7 +26,7 @@ export default createComponent({
     show: Boolean,
     className: null,
     closeable: Boolean,
-    asyncClose: Boolean,
+    beforeClose: Function,
     showIndicators: Boolean,
     images: {
       type: Array,
@@ -115,9 +116,13 @@ export default createComponent({
     },
 
     emitClose() {
-      if (!this.asyncClose) {
+      callInterceptor({
-        this.$emit('update:show', false);
+        interceptor: this.beforeClose,
-      }
+        args: [this.active],
+        done: () => {
+          this.$emit('update:show', false);
+        },
+      });
     },
 
     emitScale(args) {

src/image-preview/README.md

@@ -63,7 +63,7 @@ ImagePreview({
 });
 ```
 
-### Async Close
+### Before Close
 
 ```js
 const instance = ImagePreview({
@@ -71,7 +71,7 @@ const instance = ImagePreview({
     'https://img.yzcdn.cn/vant/apple-1.jpg',
     'https://img.yzcdn.cn/vant/apple-2.jpg',
   ],
-  asyncClose: true,
+  beforeClose: () => false,
 });
 
 setTimeout(() => {
@@ -123,7 +123,7 @@ export default {
 | onChange | Triggered when current image change | _Function_ | - |
 | onScale | Triggered when current image scale | _Function_ | - |
 | closeOnPopstate | Whether to close when popstate | _boolean_ | `true` |
-| asyncClose | Whether to enable async close | _boolean_ | `false` |
+| beforeClose | Callback before close | _(action) => boolean \| Promise_ | - |
 | className | Custom className | _any_ | - |
 | maxZoom | Max zoom | _number \| string_ | `3` |
 | minZoom | Min zoom | _number \| string_ | `1/3` |
@@ -142,7 +142,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` |
-| async-close | Whether to enable async close | _boolean_ | `false` |
+| before-close | Callback before close | _(action) => boolean \| Promise_ | - |
 | close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
 | class-name | Custom className | _any_ | - |
 | max-zoom | Max zoom | _number \| string_ | `3` |

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

@@ -95,7 +95,7 @@ ImagePreview({
 
 ### 异步关闭
 
-通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
+通过 `beforeClose` 属性可以拦截关闭行为。
 
 ```js
 const instance = ImagePreview({
@@ -103,10 +103,11 @@ const instance = ImagePreview({
     'https://img.yzcdn.cn/vant/apple-1.jpg',
     'https://img.yzcdn.cn/vant/apple-2.jpg',
   ],
-  asyncClose: true,
+  beforeClose: () => false,
 });
 
 setTimeout(() => {
+  // 调用实例上的 close 方法手动关闭图片预览
   instance.close();
 }, 2000);
 ```
@@ -158,7 +159,7 @@ export default {
 | onClose | 关闭时的回调函数 | _Function_ | - |
 | onChange | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - |
 | onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - |
-| asyncClose | 是否开启异步关闭 | _boolean_ | `false` |
+| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(active) => boolean \| Promise_ | - |
 | closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | className | 自定义类名 | _any_ | - |
 | maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
@@ -180,7 +181,7 @@ export default {
 | show-index | 是否显示页码 | _boolean_ | `true` |
 | show-indicators | 是否显示轮播指示器 | _boolean_ | `false` |
 | loop | 是否开启循环播放 | _boolean_ | `true` |
-| async-close | 是否开启异步关闭 | _boolean_ | `false` |
+| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(active) => boolean \| Promise_ | - |
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | class-name | 自定义类名 | _any_ | - |
 | max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |

src/image-preview/demo/index.vue

@@ -18,9 +18,9 @@
       </van-cell>
     </demo-block>
 
-    <demo-block card :title="t('asyncClose')">
+    <demo-block card :title="t('beforeClose')">
-      <van-cell is-link @click="showImagePreview({ asyncClose: true })">
+      <van-cell is-link @click="showImagePreview({ beforeClose })">
-        {{ t('asyncClose') }}
+        {{ t('beforeClose') }}
       </van-cell>
     </demo-block>
 
@@ -55,7 +55,7 @@ export default {
       closed: '关闭',
       showClose: '展示关闭按钮',
       showImages: '预览图片',
-      asyncClose: '异步关闭',
+      beforeClose: '异步关闭',
       closeEvent: '监听关闭事件',
       customConfig: '传入配置项',
       startPosition: '指定初始位置',
@@ -66,7 +66,7 @@ export default {
       closed: 'closed',
       showClose: 'Show Close Icon',
       showImages: 'Show Images',
-      asyncClose: 'Async Close',
+      beforeClose: 'Before Close',
       closeEvent: 'Close Event',
       customConfig: 'Custom Config',
       startPosition: 'Set Start Position',
@@ -88,6 +88,14 @@ export default {
       this.$toast(this.t('closed'));
     },
 
+    beforeClose() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(true);
+        }, 1000);
+      });
+    },
+
     componentCall() {
       this.show = true;
     },
@@ -102,7 +110,7 @@ export default {
         ...options,
       });
 
-      if (options.asyncClose) {
+      if (options.beforeClose) {
         setTimeout(() => {
           instance.close();
         }, 2000);

src/image-preview/index.js

@@ -17,7 +17,7 @@ const defaultConfig = {
   showIndex: true,
   closeable: false,
   closeIcon: 'clear',
-  asyncClose: false,
+  beforeClose: null,
   startPosition: 0,
   swipeDuration: 500,
   showIndicators: false,

types/image-preview.d.ts

@@ -12,7 +12,7 @@ export type ImagePreviewOptions =
       showIndex?: boolean;
       closeable?: boolean;
       closeIcon?: string;
-      asyncClose?: boolean;
+      beforeClose?: (active: number) => boolean | Promise<boolean>;
       swipeDuration?: number;
       startPosition?: number;
       showIndicators?: boolean;