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

This commit is contained in:
inottn 2024-08-01 07:33:18 +08:00 committed by GitHub
parent 794215133b
commit 423b0fe728
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 11 deletions

View File

@ -134,10 +134,11 @@ export default {
### beforeClose Params ### beforeClose Params
| Attribute | Description | Type | | Attribute | Description | Type |
| --------- | -------------- | ------------------------------------------ | | --- | --- | --- |
| name | Name | _string \| number_ | | event `v4.9.4` | The event object that triggers the closing action | _MouseEvent \| TouchEvent_ |
| position | Click position | _'left' \| 'right' \| 'cell' \| 'outside'_ | | name | Name | _string \| number_ |
| position | Click position | _'left' \| 'right' \| 'cell' \| 'outside'_ |
### Methods ### Methods

View File

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

View File

@ -161,7 +161,10 @@ export default defineComponent({
} }
}; };
const onClick = (position: SwipeCellPosition = 'outside') => { const onClick = (
position: SwipeCellPosition = 'outside',
event: MouseEvent | TouchEvent,
) => {
if (isInBeforeClosing) return; if (isInBeforeClosing) return;
emit('click', position); emit('click', position);
@ -171,6 +174,7 @@ export default defineComponent({
callInterceptor(props.beforeClose, { callInterceptor(props.beforeClose, {
args: [ args: [
{ {
event,
name: props.name, name: props.name,
position, position,
}, },
@ -190,7 +194,7 @@ export default defineComponent({
if (stop) { if (stop) {
event.stopPropagation(); event.stopPropagation();
} }
onClick(position); onClick(position, event);
}; };
const renderSideContent = ( const renderSideContent = (
@ -216,7 +220,9 @@ export default defineComponent({
close, 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 will set passive to `false` to eliminate the warning of Chrome
useEventListener('touchmove', onTouchMove, { useEventListener('touchmove', onTouchMove, {

View File

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