feat(SwipeCell): add event param for before-close (#13039)

youzan · Jul 31, 2024 · 423b0fe · 423b0fe
1 parent 7942151
commit 423b0fe
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/packages/vant/src/swipe-cell/README.md b/packages/vant/src/swipe-cell/README.md
@@ -134,10 +134,11 @@ export default {
 
 ### beforeClose Params
 
-| Attribute | Description    | Type                                       |
-| --------- | -------------- | ------------------------------------------ |
-| name      | Name           | _string \| number_                         |
-| position  | Click position | _'left' \| 'right' \| 'cell' \| 'outside'_ |
+| Attribute | Description | Type |
+| --- | --- | --- |
+| event `v4.9.4` | The event object that triggers the closing action | _MouseEvent \| TouchEvent_ |
+| name | Name | _string \| number_ |
+| position | Click position | _'left' \| 'right' \| 'cell' \| 'outside'_ |
 
 ### Methods
 

diff --git a/packages/vant/src/swipe-cell/README.zh-CN.md b/packages/vant/src/swipe-cell/README.zh-CN.md
@@ -143,9 +143,10 @@ export default {
 
 beforeClose 的第一个参数为对象，对象中包含以下属性：
 
-| 参数名   | 说明             | 类型                                       |
-| -------- | ---------------- | ------------------------------------------ |
-| name     | 标识符           | _string \| number_                         |
+| 参数名 | 说明 | 类型 |
+| --- | --- | --- |
+| event `v4.9.4` | 触发关闭的事件对象 | _MouseEvent \| TouchEvent_ |
+| name | 标识符 | _string \| number_ |
 | position | 关闭时的点击位置 | _'left' \| 'right' \| 'cell' \| 'outside'_ |
 
 ### 方法

diff --git a/packages/vant/src/swipe-cell/SwipeCell.tsx b/packages/vant/src/swipe-cell/SwipeCell.tsx
@@ -161,7 +161,10 @@ export default defineComponent({
       }
     };
 
-    const onClick = (position: SwipeCellPosition = 'outside') => {
+    const onClick = (
+      position: SwipeCellPosition = 'outside',
+      event: MouseEvent | TouchEvent,
+    ) => {
       if (isInBeforeClosing) return;
 
       emit('click', position);
@@ -171,6 +174,7 @@ export default defineComponent({
         callInterceptor(props.beforeClose, {
           args: [
             {
+              event,
               name: props.name,
               position,
             },
@@ -190,7 +194,7 @@ export default defineComponent({
         if (stop) {
           event.stopPropagation();
         }
-        onClick(position);
+        onClick(position, event);
       };
 
     const renderSideContent = (
@@ -216,7 +220,9 @@ export default defineComponent({
       close,
     });
 
-    useClickAway(root, () => onClick('outside'), { eventName: 'touchstart' });
+    useClickAway(root, (event) => onClick('outside', event as TouchEvent), {
+      eventName: 'touchstart',
+    });
 
     // useEventListener will set passive to `false` to eliminate the warning of Chrome
     useEventListener('touchmove', onTouchMove, {

diff --git a/packages/vant/src/swipe-cell/test/index.spec.js b/packages/vant/src/swipe-cell/test/index.spec.js
@@ -38,6 +38,7 @@ test('should allow to drag to show right part', async () => {
 });
 
 test('should call beforeClose before closing', async () => {
+  let event;
   let position;
   let clickPosition;
   let usePromise;
@@ -58,7 +59,7 @@ test('should call beforeClose before closing', async () => {
             }, 100);
           });
         } else {
-          ({ position } = params);
+          ({ event, position } = params);
         }
       },
     },
@@ -70,12 +71,16 @@ test('should call beforeClose before closing', async () => {
 
   wrapper.vm.open('left');
   wrapper.trigger('click');
+
+  expect(event).toBeInstanceOf(MouseEvent);
   expect(position).toEqual('cell');
 
   wrapper.find('.van-swipe-cell__left').trigger('click');
+  expect(event).toBeInstanceOf(MouseEvent);
   expect(position).toEqual('left');
 
   wrapper.find('.van-swipe-cell__right').trigger('click');
+  expect(event).toBeInstanceOf(MouseEvent);
   expect(position).toEqual('right');
 
   wrapper.vm.close();