breaking change(SwipeCell): adjust before-close usage

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
 

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,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
+| beforeClose | Callback function before close,<br>call done() to close dialog,<br>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_ | - |
 

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` |

src/swipe-cell/README.md

@@ -78,15 +78,15 @@ export default {
         case 'left':
         case 'cell':
         case 'outside':
-          instance.close();
+          return true;
-          break;
         case 'right':
-          Dialog.confirm({
+          return new Promise((resolve) => {
+            this.$dialog
+              .confirm({
                 message: 'Are you sure to delete?',
-          }).then(() => {
+              })
-            instance.close();
+              .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` |
 

src/swipe-cell/README.zh-CN.md

@@ -80,21 +80,20 @@ app.use(SwipeCell);
 export default {
   methods: {
     // position 为关闭时点击的位置
-    // instance 为对应的 SwipeCell 实例
+    beforeClose({ position }) {
-    beforeClose({ position, instance }) {
       switch (position) {
         case 'left':
         case 'cell':
         case 'outside':
-          instance.close();
+          return true;
-          break;
         case 'right':
-          Dialog.confirm({
+          return new Promise((resolve) => {
+            this.$dialog
+              .confirm({
                 message: '确定删除吗？',
-          }).then(() => {
+              })
-            instance.close();
+              .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` |
 
@@ -135,10 +134,9 @@ export default {
 beforeClose 的第一个参数为对象，对象中包含以下属性：
 
 | 参数名   | 说明                                               | 类型     |
-| -------- | -------------------------------------------------- | ----------- |
+| -------- | -------------------------------------------------- | -------- |
 | name     | 标识符                                             | _string_ |
 | position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ |
-| instance | SwipeCell 实例，用于调用实例方法                   | _SwipeCell_ |
 
 ### 方法
 

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();
+          return true;
-          break;
         case 'right':
+          return new Promise((resolve) => {
             this.$dialog
               .confirm({
                 message: this.t('confirm'),
               })
-            .then(() => {
+              .then(resolve);
-              instance.close();
           });
-          break;
       }
     },
   },

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) {
+        callInterceptor({
-          this.beforeClose({
+          interceptor: this.beforeClose,
+          args: [
+            {
               position,
               name: this.name,
-            instance: this,
+            },
-          });
+          ],
-        } else {
+          done: () => {
             this.close(position);
-        }
+          },
+        });
       }
     },