Skip to content

feat(drawer): add onOpened and onClosed Event #5840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

feat(drawer): add onOpened and onClosed Event #5840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8cedcf
feat: api
Wesley-0808 Aug 3, 2025
0eb18c6
feat: onOpen
Wesley-0808 Aug 3, 2025
1609885
chore: docs
Wesley-0808 Aug 14, 2025
08b4a75
feat: new event
Wesley-0808 Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/components/drawer/drawer.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,10 @@ onBeforeOpen | Function | | Typescript：`() => void`<br/> | N
onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClose | Function | | Typescript：`(context: DrawerCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onClosed | Function | | Typescript：`() => void`<br/> | N
onConfirm | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onEscKeydown | Function | | Typescript：`(context: { e: KeyboardEvent }) => void`<br/> | N
onOpened | Function | | Typescript：`() => void`<br/> | N
onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onSizeDragEnd | Function | | Typescript：`(context: { e: MouseEvent; size: number }) => void`<br/>trigger on size drag end | N

Expand All @@ -73,8 +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)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
close-btn-click | `(context: { e: MouseEvent })` | \-
closed | \- | \-
confirm | `(context: { e: MouseEvent })` | \-
esc-keydown | `(context: { e: KeyboardEvent })` | \-
opened | \- | \-
overlay-click | `(context: { e: MouseEvent })` | \-
size-drag-end | `(context: { e: MouseEvent; size: number })` | trigger on size drag end

Expand Down
4 changes: 4 additions & 0 deletions packages/components/drawer/drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,10 @@ onBeforeOpen | Function | | TS 类型：`() => void`<br/>抽屉执行打开动
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N
onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`<br/>关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
onCloseBtnClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 | N
onClosed | Function | | TS 类型：`() => void`<br/>抽屉关闭后触发 | N
onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“确认”按钮存在，则点击“确认”按钮时触发 | N
onEscKeydown | Function | | TS 类型：`(context: { e: KeyboardEvent }) => void`<br/>按下 ESC 键时触发 | N
onOpened | Function | | TS 类型：`() => void`<br/>抽屉打开后触发 | N
onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
onSizeDragEnd | Function | | TS 类型：`(context: { e: MouseEvent; size: number }) => void`<br/>抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 | N

Expand All @@ -109,8 +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)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
close-btn-click | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
closed | \- | 抽屉关闭后触发
confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发
esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 键时触发
opened | \- | 抽屉打开后触发
overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度

Expand Down
13 changes: 12 additions & 1 deletion packages/components/drawer/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,10 @@ export default defineComponent({
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
Expand All @@ -211,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 = () => {
Expand All @@ -237,6 +247,7 @@ export default defineComponent({
() => props.visible,
(value) => {
if (isServer) return;
if (value === isVisible.value) return;
if (value) {
addStyleElToHead();
props.onBeforeOpen?.();
Expand Down
4 changes: 4 additions & 0 deletions packages/components/drawer/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,14 @@ export default {
onClose: Function as PropType<TdDrawerProps['onClose']>,
/** 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件 */
onCloseBtnClick: Function as PropType<TdDrawerProps['onCloseBtnClick']>,
/** 抽屉关闭后触发 */
onClosed: Function as PropType<TdDrawerProps['onClosed']>,
/** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
onConfirm: Function as PropType<TdDrawerProps['onConfirm']>,
/** 按下 ESC 键时触发 */
onEscKeydown: Function as PropType<TdDrawerProps['onEscKeydown']>,
/** 抽屉打开后触发 */
onOpened: Function as PropType<TdDrawerProps['onOpened']>,
/** 如果蒙层存在，点击蒙层时触发 */
onOverlayClick: Function as PropType<TdDrawerProps['onOverlayClick']>,
/** 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 */
Expand Down
8 changes: 8 additions & 0 deletions packages/components/drawer/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ export interface TdDrawerProps {
* 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
*/
onCloseBtnClick?: (context: { e: MouseEvent }) => void;
/**
* 抽屉关闭后触发
*/
onClosed?: () => void;
/**
* 如果“确认”按钮存在，则点击“确认”按钮时触发
*/
Expand All @@ -136,6 +140,10 @@ export interface TdDrawerProps {
* 按下 ESC 键时触发
*/
onEscKeydown?: (context: { e: KeyboardEvent }) => void;
/**
* 抽屉打开后触发
*/
onOpened?: () => void;
/**
* 如果蒙层存在，点击蒙层时触发
*/
Expand Down