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);
+ },
+ });
}
},