From 89a39f05bcf2097993b9df164665830a206180e8 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 6 Sep 2020 10:31:14 +0800 Subject: [PATCH] breaking change(ImagePreview): remove asyncClose and add beforeClose --- docs/markdown/migrate-from-v2.zh-CN.md | 4 ++++ src/dialog/demo/index.vue | 2 +- src/image-preview/ImagePreview.js | 13 +++++++++---- src/image-preview/README.md | 8 ++++---- src/image-preview/README.zh-CN.md | 9 +++++---- src/image-preview/demo/index.vue | 20 ++++++++++++++------ src/image-preview/index.js | 2 +- types/image-preview.d.ts | 2 +- 8 files changed, 39 insertions(+), 21 deletions(-) diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md index 59fa52f91..7fb2810f6 100644 --- a/docs/markdown/migrate-from-v2.zh-CN.md +++ b/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 实例） diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue index ff0e2efa2..c78970a45 100644 --- a/src/dialog/demo/index.vue +++ b/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', }, diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index 7325560f0..03650896d 100644 --- a/src/image-preview/ImagePreview.js +++ b/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) { - this.$emit('update:show', false); - } + callInterceptor({ + interceptor: this.beforeClose, + args: [this.active], + done: () => { + this.$emit('update:show', false); + }, + }); }, emitScale(args) { diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 66e2bdc0a..7821bd48c 100644 --- a/src/image-preview/README.md +++ b/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` | diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 72e1e7909..8a5e78809 100644 --- a/src/image-preview/README.zh-CN.md +++ b/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` | diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index 82a8fd514..bf8da5739 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -18,9 +18,9 @@ - - - {{ t('asyncClose') }} + + + {{ t('beforeClose') }} @@ -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); diff --git a/src/image-preview/index.js b/src/image-preview/index.js index b4e3fb9d8..4cd178fd8 100644 --- a/src/image-preview/index.js +++ b/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, diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts index 44e00288b..45515bbcd 100644 --- a/types/image-preview.d.ts +++ b/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; swipeDuration?: number; startPosition?: number; showIndicators?: boolean;