From d61df0649f49d3654861bce00e38b6bfecdb8c49 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 6 Sep 2020 10:40:00 +0800 Subject: [PATCH] breaking change(SwipeCell): adjust before-close usage --- docs/markdown/migrate-from-v2.zh-CN.md | 1 + src/dialog/README.md | 4 ++-- src/image-preview/README.md | 4 ++-- src/swipe-cell/README.md | 16 +++++++-------- src/swipe-cell/README.zh-CN.md | 28 ++++++++++++-------------- src/swipe-cell/demo/index.vue | 20 +++++++++--------- src/swipe-cell/index.js | 22 +++++++++++--------- 7 files changed, 48 insertions(+), 47 deletions(-) diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md index 7fb2810f6..054f0e242 100644 --- a/docs/markdown/migrate-from-v2.zh-CN.md +++ b/docs/markdown/migrate-from-v2.zh-CN.md @@ -189,6 +189,7 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位 - `open` 事件的 `detail` 参数重命名为 `name` - `on-close` 属性重命名为 `before-close`，并调整参数结构 +- `before-close` 属性不再传入组件实例 #### Toast diff --git a/src/dialog/README.md b/src/dialog/README.md index 5e6cfe6e4..26aa5b11e 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -156,7 +156,7 @@ export default { | closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` | | lockScroll | Whether to lock body scroll | _boolean_ | `true` | | allowHtml `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` | -| beforeClose | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | +| beforeClose | Callback function before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | | transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | | teleport | Return the mount node for Dialog | _string \| Element_ | `body` | @@ -184,7 +184,7 @@ export default { | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | | lock-scroll | Whether to lock background scroll | _boolean_ | `true` | | allow-html `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` | -| before-close | Callback before close | _(action) => boolean \| Promise_ | - | +| before-close | Callback function before close | _(action) => boolean \| Promise_ | - | | transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | | teleport | Return the mount node for Dialog | _string \| Element_ | - | diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 7821bd48c..df70fda0a 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -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` | -| beforeClose | Callback before close | _(action) => boolean \| Promise_ | - | +| beforeClose | Callback function 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` | -| before-close | Callback before close | _(action) => boolean \| Promise_ | - | +| before-close | Callback function 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/swipe-cell/README.md b/src/swipe-cell/README.md index 770b81b5d..6fea1690f 100644 --- a/src/swipe-cell/README.md +++ b/src/swipe-cell/README.md @@ -78,15 +78,15 @@ export default { case 'left': case 'cell': case 'outside': - instance.close(); - break; + return true; case 'right': - Dialog.confirm({ - message: 'Are you sure to delete?', - }).then(() => { - instance.close(); + return new Promise((resolve) => { + this.$dialog + .confirm({ + message: 'Are you sure to delete?', + }) + .then(resolve); }); - break; } }, }, @@ -102,7 +102,7 @@ export default { | name | Identifier of SwipeCell | _number \| string_ | - | | left-width | Width of the left swipe area | _number \| string_ | `auto` | | right-width | Width of the right swipe area | _number \| string_ | `auto` | -| before-close `v2.3.0` | Callback function before close | _Function_ | - | +| before-close `v2.3.0` | Callback function before close | _(args) => boolean \| Promise_ | - | | disabled | Whether to disabled swipe | _boolean_ | `false` | | stop-propagation | Whether to stop touchmove event propagation | _boolean_ | `false` | diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index 1c13f25f5..b7190001f 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -80,21 +80,20 @@ app.use(SwipeCell); export default { methods: { // position 为关闭时点击的位置 - // instance 为对应的 SwipeCell 实例 - beforeClose({ position, instance }) { + beforeClose({ position }) { switch (position) { case 'left': case 'cell': case 'outside': - instance.close(); - break; + return true; case 'right': - Dialog.confirm({ - message: '确定删除吗？', - }).then(() => { - instance.close(); + return new Promise((resolve) => { + this.$dialog + .confirm({ + message: '确定删除吗？', + }) + .then(resolve); }); - break; } }, }, @@ -110,7 +109,7 @@ export default { | name | 标识符，可以在事件参数中获取到 | _number \| string_ | - | | left-width | 指定左侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` | | right-width | 指定右侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` | -| before-close `v2.3.0` | 关闭前的回调函数 | _Function_ | - | +| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise_ | - | | disabled | 是否禁用滑动 | _boolean_ | `false` | | stop-propagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` | @@ -134,11 +133,10 @@ export default { beforeClose 的第一个参数为对象，对象中包含以下属性： -| 参数名 | 说明 | 类型 | -| -------- | -------------------------------------------------- | ----------- | -| name | 标识符 | _string_ | -| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ | -| instance | SwipeCell 实例，用于调用实例方法 | _SwipeCell_ | +| 参数名 | 说明 | 类型 | +| -------- | -------------------------------------------------- | -------- | +| name | 标识符 | _string_ | +| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ | ### 方法 diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue index d7ce0629f..d574d10fb 100644 --- a/src/swipe-cell/demo/index.vue +++ b/src/swipe-cell/demo/index.vue @@ -81,22 +81,20 @@ export default { }, methods: { - beforeClose({ position, instance }) { + beforeClose({ position }) { switch (position) { case 'left': case 'cell': case 'outside': - instance.close(); - break; + return true; case 'right': - this.$dialog - .confirm({ - message: this.t('confirm'), - }) - .then(() => { - instance.close(); - }); - break; + return new Promise((resolve) => { + this.$dialog + .confirm({ + message: this.t('confirm'), + }) + .then(resolve); + }); } }, }, diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js index 7a2b607fc..2c6aaf61c 100644 --- a/src/swipe-cell/index.js +++ b/src/swipe-cell/index.js @@ -2,6 +2,7 @@ import { createNamespace } from '../utils'; import { range } from '../utils/format/number'; import { preventDefault } from '../utils/dom/event'; +import { callInterceptor } from '../utils/interceptor'; // Mixins import { TouchMixin } from '../mixins/touch'; @@ -167,15 +168,18 @@ export default createComponent({ this.$emit('click', position); if (this.opened && !this.lockClick) { - if (this.beforeClose) { - this.beforeClose({ - position, - name: this.name, - instance: this, - }); - } else { - this.close(position); - } + callInterceptor({ + interceptor: this.beforeClose, + args: [ + { + position, + name: this.name, + }, + ], + done: () => { + this.close(position); + }, + }); } },