From 29cfe4d9393fe9cbf3f18259c9973ea4ad2f897a Mon Sep 17 00:00:00 2001
From: Wesley <69622989+Wesley-0808@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:57:44 +0800
Subject: [PATCH] feat(Dialog&Drawer): Support BeforeOpen And BeforeClose API
 (#466)

* feat(Dialog&Drawer): Support BeforeOpen and BeforeClose API

* fix

* sync style

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 db/TDesign.db                                 | Bin 1003520 -> 1003520 bytes
 .../src/dialog/defaultProps.ts                |   4 +-
 .../src/dialog/dialog.en-US.md                |  41 ++--
 .../tdesign-mobile-react/src/dialog/dialog.md |  45 ++--
 .../tdesign-mobile-react/src/dialog/type.ts   |  29 ++-
 .../src/drawer/defaultProps.ts                |  13 ++
 .../src/drawer/drawer.en-US.md                |  49 ++++
 .../tdesign-mobile-react/src/drawer/drawer.md |  49 ++++
 .../tdesign-mobile-react/src/drawer/type.ts   | 114 ++++++++++
 .../src/dialog/dialog.en-US.md                |   5 +-
 .../tdesign-mobile-vue/src/dialog/dialog.md   |   5 +-
 .../tdesign-mobile-vue/src/dialog/props.ts    |   4 +
 .../tdesign-mobile-vue/src/dialog/type.ts     |   8 +
 .../src/drawer/drawer.en-US.md                |   5 +-
 .../tdesign-mobile-vue/src/drawer/drawer.md   |   5 +-
 .../tdesign-mobile-vue/src/drawer/props.ts    |  64 ++++++
 .../tdesign-mobile-vue/src/drawer/type.ts     | 112 ++++++++++
 .../tdesign-react/src/dialog/dialog.en-US.md  |   3 +-
 .../tdesign-react/src/dialog/dialog.md        |   3 +-
 .../products/tdesign-react/src/dialog/type.ts |   8 +
 .../tdesign-react/src/drawer/defaultProps.ts  |   2 +-
 .../tdesign-react/src/drawer/drawer.en-US.md  |   3 +-
 .../tdesign-react/src/drawer/drawer.md        |   3 +-
 .../products/tdesign-react/src/drawer/type.ts |   9 +
 .../src/dialog/dialog.en-US.md                |   5 +-
 .../tdesign-vue-next/src/dialog/dialog.md     |   5 +-
 .../tdesign-vue-next/src/dialog/props.ts      |   4 +
 .../tdesign-vue-next/src/dialog/type.ts       |   8 +
 .../src/drawer/drawer.en-US.md                |   5 +-
 .../tdesign-vue-next/src/drawer/drawer.md     |   5 +-
 .../tdesign-vue-next/src/drawer/props.ts      |   6 +-
 .../tdesign-vue-next/src/drawer/type.ts       |   9 +
 .../tdesign-vue/src/dialog/dialog.en-US.md    |   5 +-
 .../products/tdesign-vue/src/dialog/dialog.md |   5 +-
 .../products/tdesign-vue/src/dialog/props.ts  |   4 +
 .../products/tdesign-vue/src/dialog/type.ts   |   8 +
 .../tdesign-vue/src/drawer/drawer.en-US.md    |   6 +-
 .../products/tdesign-vue/src/drawer/drawer.md |   6 +-
 .../products/tdesign-vue/src/drawer/props.ts  |   6 +-
 .../products/tdesign-vue/src/drawer/type.ts   |   9 +
 packages/scripts/api.json                     | 211 ++++++++++++++++++
 41 files changed, 823 insertions(+), 67 deletions(-)
 create mode 100644 packages/products/tdesign-mobile-react/src/drawer/defaultProps.ts
 create mode 100644 packages/products/tdesign-mobile-react/src/drawer/drawer.en-US.md
 create mode 100644 packages/products/tdesign-mobile-react/src/drawer/drawer.md
 create mode 100644 packages/products/tdesign-mobile-react/src/drawer/type.ts
 create mode 100644 packages/products/tdesign-mobile-vue/src/drawer/props.ts
 create mode 100644 packages/products/tdesign-mobile-vue/src/drawer/type.ts

diff --git a/db/TDesign.db b/db/TDesign.db
index 87f8ea5ae86411102581a2837c5e1ce6304b07e6..5843787297e44efce11063dc45dd73b6d7327db9 100644
GIT binary patch
delta 805
zcmZozVB4_3c7ik`_e2?IR&EBpvW~`-))dCp6sFb`=GGLJ))dy(6t>nB_N^%#3*u#X
z*y<Vhz4@l`e&*HV{>)X&S<CU0qny2!osq46t0G4{TYddpVM!K7Nk&BuUfx6o4qjtp
z1_lOB4qgsk299*&hbQe_iW19Hi<pv9)AEZ_{R>j_p03~dV*T7_3)`M`E`PDG=jooE
zPuq7r?OO4C%I;@VJD$y(^R%<~#qwoO`zIP17@6oA8tNJvDHs`B8JbxcnW78T1H~E{
z<_dw`pp4xOk5Jv<oReRiisp!C+d7^u*+`rtObw76ApmihsX=4jTtO)oPW9;<tr>-R
zL7q1;`|6UJn3JDA{k%2fjCzPqj1>$_tqd)#Of2DsAcTrbiZb)k6>1cMODc0xi|gkK
z;0szddx-JG1#Lb4umuJ$vbR9K0to?wmLFfxPC<18o}jfNB7#k=jE&&I0*P~wP<w4A
z2M}`tF&7YX12NC`+DzW|Z;VFUSrhnTnYeiUcq4cXc&&I{w&x`A6>~C%Y=4l=7s99q
oN`icoIhk3QfUHM+lfW!s%<xTwim~xcfU>6W^>0tg<(u~i05UEYC;$Ke

delta 145
zcmZozVB4_3c7ik`+e8^>RyGE`vaZII))dCp6sFb`=GGLJ))dy(6t>nB_N^%#3*rUY
zIcpjCz4@l`e&*HV{>)X&IbHDp*R`z%oRc`(YcoNZ6NtHhm>Y<Bw%2Czwtr*P-Oif8
o7t6%O00x}QEKJ*TlK6@_8QZo$$mR=SoZgbnYqUKrmv7c10Pn>ud;kCd

diff --git a/packages/products/tdesign-mobile-react/src/dialog/defaultProps.ts b/packages/products/tdesign-mobile-react/src/dialog/defaultProps.ts
index 90c4c8b56..98c4bb4b4 100644
--- a/packages/products/tdesign-mobile-react/src/dialog/defaultProps.ts
+++ b/packages/products/tdesign-mobile-react/src/dialog/defaultProps.ts
@@ -6,10 +6,10 @@ import { TdDialogProps } from './type';
 
 export const dialogDefaultProps: TdDialogProps = {
   buttonLayout: 'horizontal',
-  closeOnOverlayClick: undefined,
+  closeOnOverlayClick: false,
+  confirmLoading: undefined,
   destroyOnClose: false,
   overlayProps: {},
   preventScrollThrough: true,
   showOverlay: true,
-  visible: false,
 };
diff --git a/packages/products/tdesign-mobile-react/src/dialog/dialog.en-US.md b/packages/products/tdesign-mobile-react/src/dialog/dialog.en-US.md
index 8131679ab..d1c1fccaa 100644
--- a/packages/products/tdesign-mobile-react/src/dialog/dialog.en-US.md
+++ b/packages/products/tdesign-mobile-react/src/dialog/dialog.en-US.md
@@ -1,28 +1,30 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Dialog Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-actions | TNode | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
-buttonLayout | String | horizontal | options：horizontal/vertical | N
-cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
-closeOnOverlayClick | Boolean | undefined | \- | N
-confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+actions | TNode | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
+buttonLayout | String | horizontal | options: horizontal/vertical | N
+cancelBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
+closeOnOverlayClick | Boolean | false | \- | N
+confirmBtn | TNode | - | Typescript：`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+confirmLoading | Boolean | undefined | confirm button loading status | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 destroyOnClose | Boolean | false | \- | N
-overlayProps | Object | {} | \- | N
+overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
 preventScrollThrough | Boolean | true | \- | N
 showOverlay | Boolean | true | \- | N
-title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-visible | Boolean | false | \- | N
+title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+visible | Boolean | - | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
+onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
 onClosed | Function |  | Typescript：`() => void`<br/> | N
 onConfirm | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -32,17 +34,18 @@ onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => voi
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | \- | N
-style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-`Omit<DialogProps, 'attach'>` | \- | - | \- | N
+style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+`Omit<DialogProps, 'attach'>` | \- | - | extends `Omit<DialogProps, 'attach'>` | N
 
 ### DialogInstance
 
 name | params | return | description
 -- | -- | -- | --
-destroy | \- | \- | \-
-hide | \- | \- | \-
-show | \- | \- | \-
-update | `(props: DialogOptions)` | \- | \-
+destroy | \- | \- | required
+hide | \- | \- | required
+setConfirmLoading | `(loading: boolean)` | \- | required。set confirm button loading status
+show | \- | \- | required
+update | `(props: DialogOptions)` | \- | required
 
 ### dialog 或 DialogPlugin
 
diff --git a/packages/products/tdesign-mobile-react/src/dialog/dialog.md b/packages/products/tdesign-mobile-react/src/dialog/dialog.md
index 5bde2fea1..76730a54f 100644
--- a/packages/products/tdesign-mobile-react/src/dialog/dialog.md
+++ b/packages/products/tdesign-mobile-react/src/dialog/dialog.md
@@ -1,52 +1,55 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Dialog Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-actions | TNode | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
+actions | TNode | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
 buttonLayout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
-cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
-closeOnOverlayClick | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
-confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+cancelBtn | TNode | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
+closeOnOverlayClick | Boolean | false | 点击蒙层时是否触发关闭事件 | N
+confirmBtn | TNode | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
+content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
-overlayProps | Object | {} | 透传至 Overlay 组件 | N
+overlayProps | Object | {} | 透传至 Overlay 组件。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts) | N
 preventScrollThrough | Boolean | true | 防止滚动穿透 | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
-title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-visible | Boolean | false | 控制对话框是否显示 | N
+title | TNode | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+visible | Boolean | - | 控制对话框是否显示 | N
 zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
-onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
+onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
 onClosed | Function |  | TS 类型：`() => void`<br/>对话框消失动画效果结束后触发 | N
 onConfirm | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“确认”按钮存在，则点击“确认”按钮时触发 | N
 onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
 
 ### DialogOptions
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N
-style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
-`Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部 API | N
+style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+`Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部属性 | N
 
 ### DialogInstance
 
 名称 | 参数 | 返回值 | 描述
 -- | -- | -- | --
-destroy | \- | \- | 销毁弹框
-hide | \- | \- | 隐藏弹框
-show | \- | \- | 显示弹框
-update | `(props: DialogOptions)` | \- | 更新弹框内容
+destroy | \- | \- | 必需。销毁弹框
+hide | \- | \- | 必需。隐藏弹框
+setConfirmLoading | `(loading: boolean)` | \- | 必需。设置确认按钮加载状态
+show | \- | \- | 必需。显示弹框
+update | `(props: DialogOptions)` | \- | 必需。更新弹框内容
 
 ### dialog 或 DialogPlugin
 
-参数名称 | 参数类型 | 参数默认值 | 参数说明
+参数名称 | 参数类型 | 参数默认值 | 参数描述
 -- | -- | -- | --
 options | \- | - | TS 类型：`DialogOptions`
 
@@ -54,12 +57,12 @@ options | \- | - | TS 类型：`DialogOptions`
 
 ### dialog.confirm 或 DialogPlugin.confirm
 
-参数名称 | 参数类型 | 参数默认值 | 参数说明
+参数名称 | 参数类型 | 参数默认值 | 参数描述
 -- | -- | -- | --
 options | \- | - | TS 类型：`DialogOptions`
 
 ### dialog.alert 或 DialogPlugin.alert
 
-参数名称 | 参数类型 | 参数默认值 | 参数说明
+参数名称 | 参数类型 | 参数默认值 | 参数描述
 -- | -- | -- | --
 options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
diff --git a/packages/products/tdesign-mobile-react/src/dialog/type.ts b/packages/products/tdesign-mobile-react/src/dialog/type.ts
index 3d4c6270b..4761507b4 100644
--- a/packages/products/tdesign-mobile-react/src/dialog/type.ts
+++ b/packages/products/tdesign-mobile-react/src/dialog/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { ButtonProps } from '../button';
+import { OverlayProps } from '../overlay';
 import { TNode, Styles } from '../common';
 import { MouseEvent } from 'react';
 
@@ -24,12 +25,17 @@ export interface TdDialogProps {
   cancelBtn?: ButtonProps | TNode | null;
   /**
    * 点击蒙层时是否触发关闭事件
+   * @default false
    */
   closeOnOverlayClick?: boolean;
   /**
    * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
    */
   confirmBtn?: ButtonProps | TNode | null;
+  /**
+   * 确认按钮加载状态
+   */
+  confirmLoading?: boolean;
   /**
    * 内容
    */
@@ -43,7 +49,7 @@ export interface TdDialogProps {
    * 透传至 Overlay 组件
    * @default {}
    */
-  overlayProps?: object;
+  overlayProps?: OverlayProps;
   /**
    * 防止滚动穿透
    * @default true
@@ -60,13 +66,20 @@ export interface TdDialogProps {
   title?: TNode;
   /**
    * 控制对话框是否显示
-   * @default false
    */
   visible?: boolean;
   /**
    * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
@@ -105,19 +118,23 @@ export interface DialogInstance {
   /**
    * 销毁弹框
    */
-  destroy?: () => void;
+  destroy: () => void;
   /**
    * 隐藏弹框
    */
-  hide?: () => void;
+  hide: () => void;
+  /**
+   * 设置确认按钮加载状态
+   */
+  setConfirmLoading: (loading: boolean) => void;
   /**
    * 显示弹框
    */
-  show?: () => void;
+  show: () => void;
   /**
    * 更新弹框内容
    */
-  update?: (props: DialogOptions) => void;
+  update: (props: DialogOptions) => void;
 }
 
 export type DialogEventSource = 'cancel' | 'overlay';
diff --git a/packages/products/tdesign-mobile-react/src/drawer/defaultProps.ts b/packages/products/tdesign-mobile-react/src/drawer/defaultProps.ts
new file mode 100644
index 000000000..32cc7dd18
--- /dev/null
+++ b/packages/products/tdesign-mobile-react/src/drawer/defaultProps.ts
@@ -0,0 +1,13 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDrawerProps } from './type';
+
+export const drawerDefaultProps: TdDrawerProps = {
+  closeOnOverlayClick: true,
+  destroyOnClose: false,
+  placement: 'right',
+  showOverlay: true,
+  visible: false,
+};
diff --git a/packages/products/tdesign-mobile-react/src/drawer/drawer.en-US.md b/packages/products/tdesign-mobile-react/src/drawer/drawer.en-US.md
new file mode 100644
index 000000000..646daadc5
--- /dev/null
+++ b/packages/products/tdesign-mobile-react/src/drawer/drawer.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Drawer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeOnOverlayClick | Boolean | true | \- | N
+destroyOnClose | Boolean | false | \- | N
+footer | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+items | Array | - | Typescript：`DrawerItem[] ` `interface DrawerItem { title: string; icon: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/drawer/type.ts) | N
+placement | String | right | options: left/right | N
+showOverlay | Boolean | true | \- | N
+title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+visible | Boolean | false | \- | N
+zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
+onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/> | N
+onItemClick | Function |  | Typescript：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/> | N
+onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+### DrawerOptions
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | \- | N
+style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+`Omit<DrawerProps, 'attach'>` | \- | - | extends `Omit<DrawerProps, 'attach'>` | N
+
+### DrawerInstance
+
+name | params | return | description
+-- | -- | -- | --
+destroy | \- | \- | \-
+hide | \- | \- | \-
+show | \- | \- | \-
+update | `(props: DrawerOptions)` | \- | \-
+
+### drawer 或 DrawerPlugin
+
+name | params | default | description
+-- | -- | -- | --
+options | \- | - | Typescript：`DrawerOptions`
diff --git a/packages/products/tdesign-mobile-react/src/drawer/drawer.md b/packages/products/tdesign-mobile-react/src/drawer/drawer.md
new file mode 100644
index 000000000..8c4d3b50e
--- /dev/null
+++ b/packages/products/tdesign-mobile-react/src/drawer/drawer.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Drawer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+attach | String / Function | - | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
+destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
+footer | TElement | - | 抽屉的底部。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/drawer/type.ts) | N
+placement | String | right | 抽屉方向。可选项：left/right | N
+showOverlay | Boolean | true | 是否显示遮罩层 | N
+title | TNode | - | 抽屉的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+visible | Boolean | false | 组件是否可见 | N
+zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
+onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/> | N
+onItemClick | Function |  | TS 类型：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/>点击抽屉里的列表项 | N
+onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
+
+### DrawerOptions
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second' | N
+style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+`Omit<DrawerProps, 'attach'>` | \- | - | 继承 `Omit<DrawerProps, 'attach'>` 中的全部属性 | N
+
+### DrawerInstance
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+destroy | \- | \- | 销毁抽屉
+hide | \- | \- | 隐藏抽屉
+show | \- | \- | 显示抽屉
+update | `(props: DrawerOptions)` | \- | 更新抽屉内容
+
+### drawer 或 DrawerPlugin
+
+参数名称 | 参数类型 | 参数默认值 | 参数描述
+-- | -- | -- | --
+options | \- | - | TS 类型：`DrawerOptions`
diff --git a/packages/products/tdesign-mobile-react/src/drawer/type.ts b/packages/products/tdesign-mobile-react/src/drawer/type.ts
new file mode 100644
index 000000000..04f7d9646
--- /dev/null
+++ b/packages/products/tdesign-mobile-react/src/drawer/type.ts
@@ -0,0 +1,114 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TElement, Styles, AttachNode } from '../common';
+import { MouseEvent } from 'react';
+
+export interface TdDrawerProps {
+  /**
+   * 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   */
+  attach?: AttachNode;
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 抽屉的底部
+   */
+  footer?: TElement;
+  /**
+   * 抽屉里的列表项
+   */
+  items?: DrawerItem[];
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 抽屉的标题
+   */
+  title?: TNode;
+  /**
+   * 组件是否可见
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
+   */
+  onClose?: (trigger: TriggerSource) => void;
+  /**
+   * 点击抽屉里的列表项
+   */
+  onItemClick?: (index: number, item: DrawerItem, context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+}
+
+export interface DrawerOptions extends Omit<TdDrawerProps, 'attach'> {
+  /**
+   * 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: Styles;
+}
+
+export interface DrawerInstance {
+  /**
+   * 销毁抽屉
+   */
+  destroy?: () => void;
+  /**
+   * 隐藏抽屉
+   */
+  hide?: () => void;
+  /**
+   * 显示抽屉
+   */
+  show?: () => void;
+  /**
+   * 更新抽屉内容
+   */
+  update?: (props: DrawerOptions) => void;
+}
+
+export interface DrawerItem {
+  title: string;
+  icon: TNode;
+}
+
+export type DrawerMethod = (options?: DrawerOptions) => void;
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/dialog.en-US.md b/packages/products/tdesign-mobile-vue/src/dialog/dialog.en-US.md
index 6f8ca7052..92d026702 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/dialog.en-US.md
+++ b/packages/products/tdesign-mobile-vue/src/dialog/dialog.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Dialog Props
 
 name | type | default | description | required
@@ -21,6 +20,8 @@ title | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor
 visible | Boolean | - | \- | N
 width | String / Number | - | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
 onClosed | Function |  | Typescript：`() => void`<br/> | N
@@ -31,6 +32,8 @@ onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => voi
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(context: DialogCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/>
 closed | \- | \-
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/dialog.md b/packages/products/tdesign-mobile-vue/src/dialog/dialog.md
index 9272afb9b..3a7681d37 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/dialog.md
+++ b/packages/products/tdesign-mobile-vue/src/dialog/dialog.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Dialog Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -21,6 +20,8 @@ title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。
 visible | Boolean | - | 控制对话框是否显示 | N
 width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N
 zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/> | N
 onClosed | Function |  | TS 类型：`() => void`<br/>对话框消失动画效果结束后触发 | N
@@ -31,6 +32,8 @@ onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
 close | `(context: DialogCloseContext)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`<br/>
 closed | \- | 对话框消失动画效果结束后触发
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/props.ts b/packages/products/tdesign-mobile-vue/src/dialog/props.ts
index 97f65fd6e..e974c4f81 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/props.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/props.ts
@@ -68,6 +68,10 @@ export default {
   zIndex: {
     type: Number,
   },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDialogProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDialogProps['onBeforeOpen']>,
   /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
   onCancel: Function as PropType<TdDialogProps['onCancel']>,
   /** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/type.ts b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
index b00e1f485..93c6b7d59 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/type.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
@@ -76,6 +76,14 @@ export interface TdDialogProps {
    * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-mobile-vue/src/drawer/drawer.en-US.md b/packages/products/tdesign-mobile-vue/src/drawer/drawer.en-US.md
index 83d7e4ced..5f5e27478 100644
--- a/packages/products/tdesign-mobile-vue/src/drawer/drawer.en-US.md
+++ b/packages/products/tdesign-mobile-vue/src/drawer/drawer.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 name | type | default | description | required
@@ -16,6 +15,8 @@ showOverlay | Boolean | true | \- | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 visible | Boolean | false | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/> | N
 onItemClick | Function |  | Typescript：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/> | N
 onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -24,6 +25,8 @@ onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => voi
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 close | `(trigger: TriggerSource)` | \-
 item-click | `( index: number, item: DrawerItem, context: { e: MouseEvent })` | \-
 overlay-click | `(context: { e: MouseEvent })` | \-
diff --git a/packages/products/tdesign-mobile-vue/src/drawer/drawer.md b/packages/products/tdesign-mobile-vue/src/drawer/drawer.md
index 98213e347..ac9906618 100644
--- a/packages/products/tdesign-mobile-vue/src/drawer/drawer.md
+++ b/packages/products/tdesign-mobile-vue/src/drawer/drawer.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -16,6 +15,8 @@ showOverlay | Boolean | true | 是否显示遮罩层 | N
 title | String / Slot / Function | - | 抽屉的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/> | N
 onItemClick | Function |  | TS 类型：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`<br/>点击抽屉里的列表项 | N
 onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
@@ -24,6 +25,8 @@ onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
 item-click | `( index: number, item: DrawerItem, context: { e: MouseEvent })` | 点击抽屉里的列表项
 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
diff --git a/packages/products/tdesign-mobile-vue/src/drawer/props.ts b/packages/products/tdesign-mobile-vue/src/drawer/props.ts
new file mode 100644
index 000000000..a5e9cd232
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/src/drawer/props.ts
@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDrawerProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
+  attach: {
+    type: [String, Function] as PropType<TdDrawerProps['attach']>,
+  },
+  /** 点击蒙层时是否触发抽屉关闭事件 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 抽屉关闭时是否销毁节点 */
+  destroyOnClose: Boolean,
+  /** 抽屉的底部 */
+  footer: {
+    type: Function as PropType<TdDrawerProps['footer']>,
+  },
+  /** 抽屉里的列表项 */
+  items: {
+    type: Array as PropType<TdDrawerProps['items']>,
+  },
+  /** 抽屉方向 */
+  placement: {
+    type: String as PropType<TdDrawerProps['placement']>,
+    default: 'right' as TdDrawerProps['placement'],
+    validator(val: TdDrawerProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉的标题 */
+  title: {
+    type: [String, Function] as PropType<TdDrawerProps['title']>,
+  },
+  /** 组件是否可见 */
+  visible: Boolean,
+  /** 抽屉层级，样式默认为 1500 */
+  zIndex: {
+    type: Number,
+  },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDrawerProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDrawerProps['onBeforeOpen']>,
+  /** 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/> */
+  onClose: Function as PropType<TdDrawerProps['onClose']>,
+  /** 点击抽屉里的列表项 */
+  onItemClick: Function as PropType<TdDrawerProps['onItemClick']>,
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: Function as PropType<TdDrawerProps['onOverlayClick']>,
+};
diff --git a/packages/products/tdesign-mobile-vue/src/drawer/type.ts b/packages/products/tdesign-mobile-vue/src/drawer/type.ts
new file mode 100644
index 000000000..30f371f64
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/src/drawer/type.ts
@@ -0,0 +1,112 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, Styles, AttachNode } from '../common';
+
+export interface TdDrawerProps {
+  /**
+   * 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   */
+  attach?: AttachNode;
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 抽屉的底部
+   */
+  footer?: TNode;
+  /**
+   * 抽屉里的列表项
+   */
+  items?: DrawerItem[];
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 抽屉的标题
+   */
+  title?: string | TNode;
+  /**
+   * 组件是否可见
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
+   */
+  onClose?: (trigger: TriggerSource) => void;
+  /**
+   * 点击抽屉里的列表项
+   */
+  onItemClick?: (index: number, item: DrawerItem, context: { e: MouseEvent }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent }) => void;
+}
+
+export interface DrawerOptions extends Omit<TdDrawerProps, 'attach'> {
+  /**
+   * 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: string | Styles;
+}
+
+export interface DrawerInstance {
+  /**
+   * 销毁抽屉
+   */
+  destroy?: () => void;
+  /**
+   * 隐藏抽屉
+   */
+  hide?: () => void;
+  /**
+   * 显示抽屉
+   */
+  show?: () => void;
+  /**
+   * 更新抽屉内容
+   */
+  update?: (props: DrawerOptions) => void;
+}
+
+export interface DrawerItem {
+  title: string;
+  icon: TNode;
+}
+
+export type DrawerMethod = (options?: DrawerOptions) => void;
diff --git a/packages/products/tdesign-react/src/dialog/dialog.en-US.md b/packages/products/tdesign-react/src/dialog/dialog.en-US.md
index 281b8ea4a..007a1a4c1 100644
--- a/packages/products/tdesign-react/src/dialog/dialog.en-US.md
+++ b/packages/products/tdesign-react/src/dialog/dialog.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 name | type | default | description | required
@@ -44,6 +43,8 @@ top | String / Number | - | \- | N
 visible | Boolean | - | \- | N
 width | String / Number | - | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
diff --git a/packages/products/tdesign-react/src/dialog/dialog.md b/packages/products/tdesign-react/src/dialog/dialog.md
index c81e8d065..272ec8a4e 100644
--- a/packages/products/tdesign-react/src/dialog/dialog.md
+++ b/packages/products/tdesign-react/src/dialog/dialog.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -44,6 +43,8 @@ top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级
 visible | Boolean | - | 控制对话框是否显示 | N
 width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N
 zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击右上角关闭按钮时触发 | N
diff --git a/packages/products/tdesign-react/src/dialog/type.ts b/packages/products/tdesign-react/src/dialog/type.ts
index bd0ecff0d..c4806e5ca 100644
--- a/packages/products/tdesign-react/src/dialog/type.ts
+++ b/packages/products/tdesign-react/src/dialog/type.ts
@@ -131,6 +131,14 @@ export interface TdDialogProps {
    * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-react/src/drawer/defaultProps.ts b/packages/products/tdesign-react/src/drawer/defaultProps.ts
index 664c5407e..9f12ce8da 100644
--- a/packages/products/tdesign-react/src/drawer/defaultProps.ts
+++ b/packages/products/tdesign-react/src/drawer/defaultProps.ts
@@ -6,7 +6,7 @@ import { TdDrawerProps } from './type';
 
 export const drawerDefaultProps: TdDrawerProps = {
   closeOnEscKeydown: undefined,
-  closeOnOverlayClick: undefined,
+  closeOnOverlayClick: true,
   destroyOnClose: false,
   footer: true,
   forceRender: false,
diff --git a/packages/products/tdesign-react/src/drawer/drawer.en-US.md b/packages/products/tdesign-react/src/drawer/drawer.en-US.md
index c8b2fb9e6..305b3ffed 100644
--- a/packages/products/tdesign-react/src/drawer/drawer.en-US.md
+++ b/packages/products/tdesign-react/src/drawer/drawer.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 name | type | default | description | required
@@ -29,6 +28,8 @@ size | String | 'small' | \- | N
 sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set `max` or `min` to limit size。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
 visible | Boolean | false | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+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-react/blob/develop/src/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
diff --git a/packages/products/tdesign-react/src/drawer/drawer.md b/packages/products/tdesign-react/src/drawer/drawer.md
index 60b8d3617..a3a385003 100644
--- a/packages/products/tdesign-react/src/drawer/drawer.md
+++ b/packages/products/tdesign-react/src/drawer/drawer.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -29,6 +28,8 @@ size | String | 'small' | 尺寸，支持 'small', 'medium', 'large'，'35px', '
 sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N
 visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DrawerCloseContext) => void`<br/>关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/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
diff --git a/packages/products/tdesign-react/src/drawer/type.ts b/packages/products/tdesign-react/src/drawer/type.ts
index 1d9e57ddb..3fe15a57c 100644
--- a/packages/products/tdesign-react/src/drawer/type.ts
+++ b/packages/products/tdesign-react/src/drawer/type.ts
@@ -35,6 +35,7 @@ export interface TdDrawerProps {
   closeOnEscKeydown?: boolean;
   /**
    * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
@@ -104,6 +105,14 @@ export interface TdDrawerProps {
    * 抽屉层级，样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-vue-next/src/dialog/dialog.en-US.md b/packages/products/tdesign-vue-next/src/dialog/dialog.en-US.md
index 0894afa82..fd1dff8a0 100644
--- a/packages/products/tdesign-vue-next/src/dialog/dialog.en-US.md
+++ b/packages/products/tdesign-vue-next/src/dialog/dialog.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 name | type | default | description | required
@@ -39,6 +38,8 @@ top | String / Number | - | \- | N
 visible | Boolean | - | \- | N
 width | String / Number | - | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -52,6 +53,8 @@ onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => voi
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(context: DialogCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
 close-btn-click | `(context: { e: MouseEvent })` | \-
diff --git a/packages/products/tdesign-vue-next/src/dialog/dialog.md b/packages/products/tdesign-vue-next/src/dialog/dialog.md
index 2679b2cbc..31e1a84b4 100644
--- a/packages/products/tdesign-vue-next/src/dialog/dialog.md
+++ b/packages/products/tdesign-vue-next/src/dialog/dialog.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -39,6 +38,8 @@ top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级
 visible | Boolean | - | 控制对话框是否显示 | N
 width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N
 zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击右上角关闭按钮时触发 | N
@@ -52,6 +53,8 @@ onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
 close | `(context: DialogCloseContext)` | 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
 close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发
diff --git a/packages/products/tdesign-vue-next/src/dialog/props.ts b/packages/products/tdesign-vue-next/src/dialog/props.ts
index f93324a05..79b6eab38 100644
--- a/packages/products/tdesign-vue-next/src/dialog/props.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/props.ts
@@ -123,6 +123,10 @@ export default {
   zIndex: {
     type: Number,
   },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDialogProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDialogProps['onBeforeOpen']>,
   /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
   onCancel: Function as PropType<TdDialogProps['onCancel']>,
   /** 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发 */
diff --git a/packages/products/tdesign-vue-next/src/dialog/type.ts b/packages/products/tdesign-vue-next/src/dialog/type.ts
index 55678a951..c6c232514 100644
--- a/packages/products/tdesign-vue-next/src/dialog/type.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/type.ts
@@ -125,6 +125,14 @@ export interface TdDialogProps {
    * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-vue-next/src/drawer/drawer.en-US.md b/packages/products/tdesign-vue-next/src/drawer/drawer.en-US.md
index 9b4a3c4fa..089997b7d 100644
--- a/packages/products/tdesign-vue-next/src/drawer/drawer.en-US.md
+++ b/packages/products/tdesign-vue-next/src/drawer/drawer.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 name | type | default | description | required
@@ -26,6 +25,8 @@ size | String | 'small' | \- | N
 sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set `max` or `min` to limit size。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
 visible | Boolean | false | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+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/tree/develop/src/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
@@ -38,6 +39,8 @@ onSizeDragEnd | Function |  | Typescript：`(context: { e: MouseEvent; size: num
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(context: DrawerCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/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 })` | \-
diff --git a/packages/products/tdesign-vue-next/src/drawer/drawer.md b/packages/products/tdesign-vue-next/src/drawer/drawer.md
index 87a212a7c..04774ad04 100644
--- a/packages/products/tdesign-vue-next/src/drawer/drawer.md
+++ b/packages/products/tdesign-vue-next/src/drawer/drawer.md
@@ -37,7 +37,6 @@
 如果您不确定问题是否是由该规则引起的，或者确定该规则不是问题的根本原因，请在 `GitHub` 上提出一个 `issue`，并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。
 
 ## API
-
 ### Drawer Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -62,6 +61,8 @@ size | String | 'small' | 尺寸，支持 'small', 'medium', 'large'，'35px', '
 sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
 visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DrawerCloseContext) => void`<br/>关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/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
@@ -74,6 +75,8 @@ onSizeDragEnd | Function |  | TS 类型：`(context: { e: MouseEvent; size: numb
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
 close | `(context: DrawerCloseContext)` | 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/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 })` | 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
diff --git a/packages/products/tdesign-vue-next/src/drawer/props.ts b/packages/products/tdesign-vue-next/src/drawer/props.ts
index 2d106676c..6f8bc2e28 100644
--- a/packages/products/tdesign-vue-next/src/drawer/props.ts
+++ b/packages/products/tdesign-vue-next/src/drawer/props.ts
@@ -32,7 +32,7 @@ export default {
   /** 点击蒙层时是否触发抽屉关闭事件 */
   closeOnOverlayClick: {
     type: Boolean,
-    default: undefined,
+    default: true,
   },
   /** 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
   confirmBtn: {
@@ -100,6 +100,10 @@ export default {
   zIndex: {
     type: Number,
   },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDrawerProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDrawerProps['onBeforeOpen']>,
   /** 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 */
   onCancel: Function as PropType<TdDrawerProps['onCancel']>,
   /** 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发 */
diff --git a/packages/products/tdesign-vue-next/src/drawer/type.ts b/packages/products/tdesign-vue-next/src/drawer/type.ts
index 7168187fc..07f46cf04 100644
--- a/packages/products/tdesign-vue-next/src/drawer/type.ts
+++ b/packages/products/tdesign-vue-next/src/drawer/type.ts
@@ -30,6 +30,7 @@ export interface TdDrawerProps {
   closeOnEscKeydown?: boolean;
   /**
    * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
@@ -98,6 +99,14 @@ export interface TdDrawerProps {
    * 抽屉层级，样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-vue/src/dialog/dialog.en-US.md b/packages/products/tdesign-vue/src/dialog/dialog.en-US.md
index bf600223a..393f16d4e 100644
--- a/packages/products/tdesign-vue/src/dialog/dialog.en-US.md
+++ b/packages/products/tdesign-vue/src/dialog/dialog.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 name | type | default | description | required
@@ -39,6 +38,8 @@ top | String / Number | - | \- | N
 visible | Boolean | - | \- | N
 width | String / Number | - | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+onBeforeOpen | Function |  | Typescript：`() => void`<br/> | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: DialogCloseContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -52,6 +53,8 @@ onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => voi
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(context: DialogCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
 close-btn-click | `(context: { e: MouseEvent })` | \-
diff --git a/packages/products/tdesign-vue/src/dialog/dialog.md b/packages/products/tdesign-vue/src/dialog/dialog.md
index 49e808178..147669543 100644
--- a/packages/products/tdesign-vue/src/dialog/dialog.md
+++ b/packages/products/tdesign-vue/src/dialog/dialog.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### DialogCard Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -39,6 +38,8 @@ top | String / Number | - | 用于弹框具体窗口顶部的距离，优先级
 visible | Boolean | - | 控制对话框是否显示 | N
 width | String / Number | - | 对话框宽度，示例：320, '500px', '80%' | N
 zIndex | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DialogCloseContext) => void`<br/>关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击右上角关闭按钮时触发 | N
@@ -52,6 +53,8 @@ onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
 close | `(context: DialogCloseContext)` | 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`<br/>
 close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发
diff --git a/packages/products/tdesign-vue/src/dialog/props.ts b/packages/products/tdesign-vue/src/dialog/props.ts
index 04d14fbbb..9f4e897a7 100644
--- a/packages/products/tdesign-vue/src/dialog/props.ts
+++ b/packages/products/tdesign-vue/src/dialog/props.ts
@@ -123,6 +123,10 @@ export default {
   zIndex: {
     type: Number,
   },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDialogProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDialogProps['onBeforeOpen']>,
   /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
   onCancel: Function as PropType<TdDialogProps['onCancel']>,
   /** 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发 */
diff --git a/packages/products/tdesign-vue/src/dialog/type.ts b/packages/products/tdesign-vue/src/dialog/type.ts
index 55678a951..c6c232514 100644
--- a/packages/products/tdesign-vue/src/dialog/type.ts
+++ b/packages/products/tdesign-vue/src/dialog/type.ts
@@ -125,6 +125,14 @@ export interface TdDialogProps {
    * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/products/tdesign-vue/src/drawer/drawer.en-US.md b/packages/products/tdesign-vue/src/drawer/drawer.en-US.md
index 9598e141e..4e98b2f18 100644
--- a/packages/products/tdesign-vue/src/drawer/drawer.en-US.md
+++ b/packages/products/tdesign-vue/src/drawer/drawer.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 name | type | default | description | required
@@ -26,6 +25,8 @@ size | String | 'small' | \- | N
 sizeDraggable | Boolean / Object | false | allow resizing drawer width/height, set `max` or `min` to limit size。Typescript：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N
 visible | Boolean | false | \- | N
 zIndex | Number | - | \- | N
+onBeforeClose | Function |  | Typescript：`() => void`<br/> | N
+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/tree/develop/src/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
@@ -38,6 +39,8 @@ onSizeDragEnd | Function |  | Typescript：`(context: { e: MouseEvent; size: num
 
 name | params | description
 -- | -- | --
+before-close | \- | \-
+before-open | \- | \-
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(context: DrawerCloseContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/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 })` | \-
@@ -52,6 +55,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 className | String | - | \- | N
+style | String / Object | - | Typescript：`string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 `Omit<DrawerProps, 'attach'>` | \- | - | extends `Omit<DrawerProps, 'attach'>` | N
 
 ### DrawerInstance
diff --git a/packages/products/tdesign-vue/src/drawer/drawer.md b/packages/products/tdesign-vue/src/drawer/drawer.md
index 14632e1f1..4a0388add 100644
--- a/packages/products/tdesign-vue/src/drawer/drawer.md
+++ b/packages/products/tdesign-vue/src/drawer/drawer.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -26,6 +25,8 @@ size | String | 'small' | 尺寸，支持 'small', 'medium', 'large'，'35px', '
 sizeDraggable | Boolean / Object | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度。`sizeDraggable.max` 和 `sizeDraggable.min` 用于控制拖拽尺寸大小限制。TS 类型：`boolean \| SizeDragLimit` `interface SizeDragLimit { max: number, min: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N
 visible | Boolean | false | 组件是否可见 | N
 zIndex | Number | - | 抽屉层级，样式默认为 1500 | N
+onBeforeClose | Function |  | TS 类型：`() => void`<br/>对话框执行消失动画效果前触发 | N
+onBeforeOpen | Function |  | TS 类型：`() => void`<br/>对话框执行弹出动画效果前触发 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 | N
 onClose | Function |  | TS 类型：`(context: DrawerCloseContext) => void`<br/>关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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
@@ -38,6 +39,8 @@ onSizeDragEnd | Function |  | TS 类型：`(context: { e: MouseEvent; size: numb
 
 名称 | 参数 | 描述
 -- | -- | --
+before-close | \- | 对话框执行消失动画效果前触发
+before-open | \- | 对话框执行弹出动画效果前触发
 cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
 close | `(context: DrawerCloseContext)` | 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/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 })` | 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
@@ -52,6 +55,7 @@ size-drag-end | `(context: { e: MouseEvent; size: number  })` | 抽屉大小拖
 -- | -- | -- | -- | --
 attach | String / Function | 'body' | 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 className | String | - | 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second' | N
+style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string \| Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 `Omit<DrawerProps, 'attach'>` | \- | - | 继承 `Omit<DrawerProps, 'attach'>` 中的全部属性 | N
 
 ### DrawerInstance
diff --git a/packages/products/tdesign-vue/src/drawer/props.ts b/packages/products/tdesign-vue/src/drawer/props.ts
index ac62767de..aa2744bdd 100644
--- a/packages/products/tdesign-vue/src/drawer/props.ts
+++ b/packages/products/tdesign-vue/src/drawer/props.ts
@@ -32,7 +32,7 @@ export default {
   /** 点击蒙层时是否触发抽屉关闭事件 */
   closeOnOverlayClick: {
     type: Boolean,
-    default: undefined,
+    default: true,
   },
   /** 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
   confirmBtn: {
@@ -100,6 +100,10 @@ export default {
   zIndex: {
     type: Number,
   },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDrawerProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDrawerProps['onBeforeOpen']>,
   /** 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件 */
   onCancel: Function as PropType<TdDrawerProps['onCancel']>,
   /** 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发 */
diff --git a/packages/products/tdesign-vue/src/drawer/type.ts b/packages/products/tdesign-vue/src/drawer/type.ts
index 7168187fc..07f46cf04 100644
--- a/packages/products/tdesign-vue/src/drawer/type.ts
+++ b/packages/products/tdesign-vue/src/drawer/type.ts
@@ -30,6 +30,7 @@ export interface TdDrawerProps {
   closeOnEscKeydown?: boolean;
   /**
    * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
@@ -98,6 +99,14 @@ export interface TdDrawerProps {
    * 抽屉层级，样式默认为 1500
    */
   zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
   /**
    * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
    */
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index 750b95ace..83fdc2167 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -40111,6 +40111,92 @@
         "Number"
       ]
     },
+    {
+      "id": 1731453332,
+      "platform_framework": [
+        "1",
+        "2",
+        "4",
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "Dialog",
+      "field_category": 2,
+      "field_name": "beforeClose",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "对话框执行消失动画效果前触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-12 23:15:32",
+      "update_time": "2024-11-12 23:15:32",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": []
+    },
+    {
+      "id": 1731453190,
+      "platform_framework": [
+        "1",
+        "2",
+        "4",
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "Dialog",
+      "field_category": 2,
+      "field_name": "beforeOpen",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "对话框执行弹出动画效果前触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-12 23:13:10",
+      "update_time": "2024-11-12 23:13:10",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": []
+    },
     {
       "id": 66,
       "platform_framework": [
@@ -41324,6 +41410,45 @@
         "Object"
       ]
     },
+    {
+      "id": 1731475189,
+      "platform_framework": [
+        "1"
+      ],
+      "component": "DialogOptions",
+      "field_category": 1,
+      "field_name": "style",
+      "field_type": [
+        "1",
+        "8"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-13 05:19:49",
+      "update_time": "2024-11-13 05:19:49",
+      "event_output": null,
+      "custom_field_type": "string | Styles",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)"
+      ],
+      "field_type_text": [
+        "String",
+        "Object"
+      ]
+    },
     {
       "id": 601,
       "platform_framework": [
@@ -43030,6 +43155,92 @@
         "Number"
       ]
     },
+    {
+      "id": 1731453410,
+      "platform_framework": [
+        "1",
+        "2",
+        "4",
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "Drawer",
+      "field_category": 2,
+      "field_name": "beforeClose",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "对话框执行消失动画效果前触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-12 23:16:50",
+      "update_time": "2024-11-12 23:16:50",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": []
+    },
+    {
+      "id": 1731453385,
+      "platform_framework": [
+        "1",
+        "2",
+        "4",
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "Drawer",
+      "field_category": 2,
+      "field_name": "beforeOpen",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "对话框执行弹出动画效果前触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-11-12 23:16:25",
+      "update_time": "2024-11-12 23:16:25",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": []
+    },
     {
       "id": 701,
       "platform_framework": [