From e8cedcf9df5bce7933ba9b57c986055d72e61761 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Sun, 3 Aug 2025 22:10:59 +0800 Subject: [PATCH 1/4] feat: api --- packages/components/drawer/drawer.en-US.md | 2 ++ packages/components/drawer/drawer.md | 2 ++ packages/components/drawer/props.ts | 2 ++ packages/components/drawer/type.ts | 4 ++++ 4 files changed, 10 insertions(+) diff --git a/packages/components/drawer/drawer.en-US.md b/packages/components/drawer/drawer.en-US.md index 4543a56ca4..d3b096fad5 100644 --- a/packages/components/drawer/drawer.en-US.md +++ b/packages/components/drawer/drawer.en-US.md @@ -61,6 +61,7 @@ onClose | Function | | Typescript：`(context: DrawerCloseContext) => void`
void`
| N onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`
| N +onOpen | Function | | Typescript：`() => void`
| N onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onSizeDragEnd | Function | | Typescript：`(context: { e: MouseEvent; size: number }) => void`
trigger on size drag end | N @@ -75,6 +76,7 @@ close | `(context: DrawerCloseContext)` | [see more ts definition](https://githu close-btn-click | `(context: { e: MouseEvent })` | \- confirm | `(context: { e: MouseEvent })` | \- esc-keydown | `(context: { e: KeyboardEvent })` | \- +open | \- | \- overlay-click | `(context: { e: MouseEvent })` | \- size-drag-end | `(context: { e: MouseEvent; size: number })` | trigger on size drag end diff --git a/packages/components/drawer/drawer.md b/packages/components/drawer/drawer.md index f2fec16916..2738c76504 100644 --- a/packages/components/drawer/drawer.md +++ b/packages/components/drawer/drawer.md @@ -97,6 +97,7 @@ onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 | N onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发 | N onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
按下 ESC 键时触发 | N +onOpen | Function | | TS 类型：`() => void`
抽屉打开时触发 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N onSizeDragEnd | Function | | TS 类型：`(context: { e: MouseEvent; size: number }) => void`
抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 | N @@ -111,6 +112,7 @@ close | `(context: DrawerCloseContext)` | 关闭事件，取消按钮点击时 close-btn-click | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发 esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 键时触发 +open | \- | 抽屉打开时触发 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发 size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 diff --git a/packages/components/drawer/props.ts b/packages/components/drawer/props.ts index dcc1e85eb5..f9f4197a91 100644 --- a/packages/components/drawer/props.ts +++ b/packages/components/drawer/props.ts @@ -121,6 +121,8 @@ export default { onConfirm: Function as PropType, /** 按下 ESC 键时触发 */ onEscKeydown: Function as PropType, + /** 抽屉打开时触发 */ + onOpen: Function as PropType, /** 如果蒙层存在，点击蒙层时触发 */ onOverlayClick: Function as PropType, /** 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 */ diff --git a/packages/components/drawer/type.ts b/packages/components/drawer/type.ts index 4fe2d08dac..2025881a7f 100644 --- a/packages/components/drawer/type.ts +++ b/packages/components/drawer/type.ts @@ -136,6 +136,10 @@ export interface TdDrawerProps { * 按下 ESC 键时触发 */ onEscKeydown?: (context: { e: KeyboardEvent }) => void; + /** + * 抽屉打开时触发 + */ + onOpen?: () => void; /** * 如果蒙层存在，点击蒙层时触发 */ From 0eb18c69e2aad5b4dc60d97b0a72179206628dfc Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Sun, 3 Aug 2025 22:49:01 +0800 Subject: [PATCH 2/4] feat: onOpen --- packages/components/drawer/drawer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/drawer/drawer.tsx b/packages/components/drawer/drawer.tsx index 3b1a70a294..d9cd511540 100644 --- a/packages/components/drawer/drawer.tsx +++ b/packages/components/drawer/drawer.tsx @@ -188,6 +188,7 @@ export default defineComponent({ const updateVisibleState = (value: boolean) => { if (value) { isMounted.value = true; + props.onOpen?.(); } if (props.destroyOnClose) { From 16098858eb395dc0274842d81330dcbfab5a0082 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Thu, 14 Aug 2025 12:36:18 +0800 Subject: [PATCH 3/4] chore: docs --- packages/components/drawer/drawer.en-US.md | 6 ++++-- packages/components/drawer/drawer.md | 6 ++++-- packages/components/drawer/props.ts | 6 ++++-- packages/components/drawer/type.ts | 8 ++++++-- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/components/drawer/drawer.en-US.md b/packages/components/drawer/drawer.en-US.md index d3b096fad5..8adcee6ef1 100644 --- a/packages/components/drawer/drawer.en-US.md +++ b/packages/components/drawer/drawer.en-US.md @@ -59,9 +59,10 @@ onBeforeOpen | Function | | Typescript：`() => void`
| N onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript：`(context: DrawerCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | Typescript：`() => void`
| N onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`
| N -onOpen | Function | | Typescript：`() => void`
| N +onOpened | Function | | Typescript：`() => void`
| N onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onSizeDragEnd | Function | | Typescript：`(context: { e: MouseEvent; size: number }) => void`
trigger on size drag end | N @@ -74,9 +75,10 @@ before-open | \- | \- cancel | `(context: { e: MouseEvent })` | \- close | `(context: DrawerCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
close-btn-click | `(context: { e: MouseEvent })` | \- +closed | \- | \- confirm | `(context: { e: MouseEvent })` | \- esc-keydown | `(context: { e: KeyboardEvent })` | \- -open | \- | \- +opened | \- | \- overlay-click | `(context: { e: MouseEvent })` | \- size-drag-end | `(context: { e: MouseEvent; size: number })` | trigger on size drag end diff --git a/packages/components/drawer/drawer.md b/packages/components/drawer/drawer.md index 2738c76504..a9f1b1d6fb 100644 --- a/packages/components/drawer/drawer.md +++ b/packages/components/drawer/drawer.md @@ -95,9 +95,10 @@ onBeforeOpen | Function | | TS 类型：`() => void`
抽屉执行打开动 onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`
关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
| N onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 | N +onClosed | Function | | TS 类型：`() => void`
抽屉关闭后触发 | N onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发 | N onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`
按下 ESC 键时触发 | N -onOpen | Function | | TS 类型：`() => void`
抽屉打开时触发 | N +onOpened | Function | | TS 类型：`() => void`
抽屉打开后触发 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N onSizeDragEnd | Function | | TS 类型：`(context: { e: MouseEvent; size: number }) => void`
抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 | N @@ -110,9 +111,10 @@ before-open | \- | 抽屉执行打开动画效果前触发 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 close | `(context: DrawerCloseContext)` | 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。
`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`
close-btn-click | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 +closed | \- | 抽屉关闭后触发 confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发 esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 键时触发 -open | \- | 抽屉打开时触发 +opened | \- | 抽屉打开后触发 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发 size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 diff --git a/packages/components/drawer/props.ts b/packages/components/drawer/props.ts index f9f4197a91..09361ce244 100644 --- a/packages/components/drawer/props.ts +++ b/packages/components/drawer/props.ts @@ -117,12 +117,14 @@ export default { onClose: Function as PropType, /** 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 */ onCloseBtnClick: Function as PropType, + /** 抽屉关闭后触发 */ + onClosed: Function as PropType, /** 如果“确认”按钮存在，则点击“确认”按钮时触发 */ onConfirm: Function as PropType, /** 按下 ESC 键时触发 */ onEscKeydown: Function as PropType, - /** 抽屉打开时触发 */ - onOpen: Function as PropType, + /** 抽屉打开后触发 */ + onOpened: Function as PropType, /** 如果蒙层存在，点击蒙层时触发 */ onOverlayClick: Function as PropType, /** 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 */ diff --git a/packages/components/drawer/type.ts b/packages/components/drawer/type.ts index 2025881a7f..b2adcb985b 100644 --- a/packages/components/drawer/type.ts +++ b/packages/components/drawer/type.ts @@ -128,6 +128,10 @@ export interface TdDrawerProps { * 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 */ onCloseBtnClick?: (context: { e: MouseEvent }) => void; + /** + * 抽屉关闭后触发 + */ + onClosed?: () => void; /** * 如果“确认”按钮存在，则点击“确认”按钮时触发 */ @@ -137,9 +141,9 @@ export interface TdDrawerProps { */ onEscKeydown?: (context: { e: KeyboardEvent }) => void; /** - * 抽屉打开时触发 + * 抽屉打开后触发 */ - onOpen?: () => void; + onOpened?: () => void; /** * 如果蒙层存在，点击蒙层时触发 */ From 08b4a75426f54cfcdd12e13f37562fd0cca6b258 Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Thu, 14 Aug 2025 13:05:50 +0800 Subject: [PATCH 4/4] feat: new event --- packages/components/drawer/drawer.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/drawer/drawer.tsx b/packages/components/drawer/drawer.tsx index d9cd511540..785bd7a994 100644 --- a/packages/components/drawer/drawer.tsx +++ b/packages/components/drawer/drawer.tsx @@ -188,15 +188,16 @@ export default defineComponent({ const updateVisibleState = (value: boolean) => { if (value) { isMounted.value = true; - props.onOpen?.(); } if (props.destroyOnClose) { if (value) { destroyOnCloseVisible.value = false; setTimeout(() => (isVisible.value = true)); + props.onOpened?.(); } else { isVisible.value = false; + props.onClosed?.(); // immediate 的 watch 的第一次触发，会将设置为 true 的行为延后 // 插件场景下，watch -> create 方法 的立刻调用，导致 destroyOnCloseVisible 被 watch 的第一次触发覆盖 // 所以关闭时候，默认先置为 false @@ -212,10 +213,18 @@ export default defineComponent({ if (destroyOnCloseVisible.value && value) { destroyOnCloseVisible.value = false; setTimeout(() => (isVisible.value = true)); + props.onOpened?.(); return; } - setTimeout(() => (isVisible.value = value)); + setTimeout(() => { + isVisible.value = value; + if (value) { + props.onOpened?.(); + } else { + props.onClosed?.(); + } + }); }; const addStyleElToHead = () => { @@ -238,6 +247,7 @@ export default defineComponent({ () => props.visible, (value) => { if (isServer) return; + if (value === isVisible.value) return; if (value) { addStyleElToHead(); props.onBeforeOpen?.();