diff --git a/packages/components/drawer/drawer.en-US.md b/packages/components/drawer/drawer.en-US.md
index 4543a56ca4..8adcee6ef1 100644
--- a/packages/components/drawer/drawer.en-US.md
+++ b/packages/components/drawer/drawer.en-US.md
@@ -59,8 +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
+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
@@ -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)。
`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 })` | \-
+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 f2fec16916..a9f1b1d6fb 100644
--- a/packages/components/drawer/drawer.md
+++ b/packages/components/drawer/drawer.md
@@ -95,8 +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
+onOpened | Function | | TS 类型：`() => void`
抽屉打开后触发 | N
onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N
onSizeDragEnd | Function | | TS 类型：`(context: { e: MouseEvent; size: number }) => void`
抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 | N
@@ -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)。
`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 键时触发
+opened | \- | 抽屉打开后触发
overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
size-drag-end | `(context: { e: MouseEvent; size: number })` | 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度
diff --git a/packages/components/drawer/drawer.tsx b/packages/components/drawer/drawer.tsx
index 3b1a70a294..785bd7a994 100644
--- a/packages/components/drawer/drawer.tsx
+++ b/packages/components/drawer/drawer.tsx
@@ -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
@@ -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 = () => {
@@ -237,6 +247,7 @@ export default defineComponent({
() => props.visible,
(value) => {
if (isServer) return;
+ if (value === isVisible.value) return;
if (value) {
addStyleElToHead();
props.onBeforeOpen?.();
diff --git a/packages/components/drawer/props.ts b/packages/components/drawer/props.ts
index dcc1e85eb5..09361ce244 100644
--- a/packages/components/drawer/props.ts
+++ b/packages/components/drawer/props.ts
@@ -117,10 +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,
+ /** 抽屉打开后触发 */
+ onOpened: Function as PropType,
/** 如果蒙层存在，点击蒙层时触发 */
onOverlayClick: Function as PropType,
/** 抽屉大小拖拽结束时触发，事件参数 `size` 在横向抽屉中表示宽度，在纵向抽屉中表示高度 */
diff --git a/packages/components/drawer/type.ts b/packages/components/drawer/type.ts
index 4fe2d08dac..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;
/**
* 如果“确认”按钮存在，则点击“确认”按钮时触发
*/
@@ -136,6 +140,10 @@ export interface TdDrawerProps {
* 按下 ESC 键时触发
*/
onEscKeydown?: (context: { e: KeyboardEvent }) => void;
+ /**
+ * 抽屉打开后触发
+ */
+ onOpened?: () => void;
/**
* 如果蒙层存在，点击蒙层时触发
*/