From 8dd1aadd876cca762ad420229477dad0dc2f62de Mon Sep 17 00:00:00 2001
From: Wesley <985189328@qq.com>
Date: Wed, 13 Nov 2024 07:37:00 +0800
Subject: [PATCH 1/2] feat(Dialog&Drawer): Support BeforeOpen and BeforeClose
 API

---
 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 +++++++++
 .../tdesign-mobile-vue/src/dialog/props.ts    |  81 -------
 .../tdesign-mobile-vue/src/dialog/type.ts     | 139 -----------
 .../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-card-props.ts           |   8 -
 .../tdesign-vue-next/src/dialog/props.ts      | 142 -----------
 .../tdesign-vue-next/src/dialog/type.ts       | 228 ------------------
 .../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    |   6 +-
 .../products/tdesign-vue/src/dialog/dialog.md |   6 +-
 .../products/tdesign-vue/src/dialog/props.ts  |   4 +
 .../products/tdesign-vue/src/dialog/type.ts   |  12 +-
 .../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                     | 172 +++++++++++++
 38 files changed, 744 insertions(+), 667 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 1f0f8cd98d84bb4a3f7968052194741b3202396a..36a19e2ab592346d657059fcd9fcdcd7a200cb85 100644
GIT binary patch
delta 1110
zcmb`GUr19?9LMjy=iKf7J9je-CjCLlC~C@fry`bUIxH&OONR8Mv#B}rFQhLzC2%VK
zjoDRlrcmm`NPW<wRu4fhzC;gVAtq{UEszM7BhZKL{tzl5K|Oro%lE)JpY#2l(=wXb
zGMd?Uf>iaN%%xRC@`KKqyJ?nVemkNGf_TFMNZGoR`uM4b9*fgsAr(=IfFh`fR-{s-
z#vTh(sMT>yEupy~K1KnQ%m=t8c9(5nc9`1P1g3y-v=Z)^I7r5kXBdQv2?m)=${{R+
z7(_5-rp>J^b6s(Rt&XzVN~`N^xs}!RHt*Def6DC}Yx8wX_{X|@bM4+|Gv3b0FRquq
zfp*`>u(zYzKQZp@?UxKvN|Mo-WR&71Q-(1uBh_#)a)dL7TN`Fb_%p-OK?X~Wt?Ceh
z_tk>ex%hVoQtCbgM+8esReI1I)q^X`e6P5&y6nI7keXqVA`p(>-GnlSTRf@<)j@`T
z>Oq-CXcXH0;|XQXrV2(8tBAu*6})o*)`M|M&W<5Z&7Kv8C<8r5d+2rb1y1B3`xEBD
z%TR*n;b|BPIY@vY*alnRBX|eif<-V5#^rC6@S5({@A5C?l?wD67eL`Qc^rn{u{O`n
z4@R81n3v`FWwlPrq!TLPX*i8xTlpdEr-dAn3kT<J2KXm9MJ*&!6hA57VTBPPym0kO
zkarV0xy6oRojOjyIu3m;P!j~14Vo#OUW5!3q_3-cWTpt|<IyU5uL)|l57UBS@CdYn
zX1U#p_T+85*ogN^P=4g}Qhs$=Si!e!D1!>)D8ZWW0S}g;93XdAitBPu3A%&>cJzsi
z4Plk?n{C36sB07ga#0D=V{H}MAho6Z=Ziuxy4EG^%+(<ByP97k4b(h=3yZ`;ia}OX
zi1LwHp0|qE@U&IbvrxHGIo_~~<z!;$gNps3EflvT_C=jb?2S5=*n=zYi>|F-pG|aP

delta 589
zcmZ{hUr3Wt6u|Gj-?x3=ch9}sw}|@E84Hp?maGzuP|%FRisplc7({N)%9*T}USeSM
zu&5SFf9~v`7K<cCsc1JyqF#D77#72ah>9W~27@8hL)ZBnhacz1;T#T!GcwsSGTAa(
zjq#Yj-Gx#8g)1}tjo}T2JX=Bty|Xl(#OwooATH;^sazN<h(c573YWsIFk~)l_SjxG
zO(O3R&mCUk^-!W>+grLcAF@tbH(LXZspO!kuoP4#2O)J^KcROb(dxrB^R;Z8ROy}n
z3z3L$M-&NrEoO%KGuf@P<Jjl0Cv>-=5yG-`m+KQUg+Fi9Xm!XI&3U6k*1DMsQ*$q(
z{U78MoRtj*+fInJDtayUFaT31z|&C0rjf(1!xoioehnOzO@0+NryR<pL;25c!*v*k
zv@#LR5gydNW$%hKPw^1(YvuJ|n;2sRR^clYU=iNK0?e*8SBr@V|E4cIWfNjH&f7#Z
z#`nm-QGN_l;|8JwaIt}%mt8Twk5Im-3N$;$nq=lQ->-=|jXi2Q)K-QEl}EJ4hv0t2
zcKmt_ch~J`3GP+QXI+BvirEL_kdbQLR^m}#+&BPl5-h8Xiry%%ljbo0f$dm&=P10W
z45Wj9;Q7l0$3+7n+(lj?vC_vojNed%@35?H_4E)q9q|M$eQiK~j(g5vk%{wwURY)y
L<<L3LtuOxo%RsA2

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/props.ts b/packages/products/tdesign-mobile-vue/src/dialog/props.ts
index 97f65fd6e..e69de29bb 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/props.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/props.ts
@@ -1,81 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { TdDialogProps } from './type';
-import { PropType } from 'vue';
-
-export default {
-  /** 操作栏 */
-  actions: {
-    type: [Array, Function] as PropType<TdDialogProps['actions']>,
-  },
-  /** 多按钮排列方式 */
-  buttonLayout: {
-    type: String as PropType<TdDialogProps['buttonLayout']>,
-    default: 'horizontal' as TdDialogProps['buttonLayout'],
-    validator(val: TdDialogProps['buttonLayout']): boolean {
-      if (!val) return true;
-      return ['horizontal', 'vertical'].includes(val);
-    },
-  },
-  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
-  cancelBtn: {
-    type: [String, Object, Function] as PropType<TdDialogProps['cancelBtn']>,
-  },
-  /** 多按钮排列方式。可选项：true/false */
-  closeBtn: Boolean,
-  /** 点击蒙层时是否触发关闭事件 */
-  closeOnOverlayClick: Boolean,
-  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
-  confirmBtn: {
-    type: [String, Object, Function] as PropType<TdDialogProps['confirmBtn']>,
-  },
-  /** 内容 */
-  content: {
-    type: [String, Function] as PropType<TdDialogProps['content']>,
-  },
-  /** 是否在关闭弹框的时候销毁子元素 */
-  destroyOnClose: Boolean,
-  /** 透传至 Overlay 组件 */
-  overlayProps: {
-    type: Object as PropType<TdDialogProps['overlayProps']>,
-    default: () => ({}),
-  },
-  /** 防止滚动穿透 */
-  preventScrollThrough: {
-    type: Boolean,
-    default: true,
-  },
-  /** 是否显示遮罩层 */
-  showOverlay: {
-    type: Boolean,
-    default: true,
-  },
-  /** 标题 */
-  title: {
-    type: [String, Function] as PropType<TdDialogProps['title']>,
-  },
-  /** 控制对话框是否显示 */
-  visible: Boolean,
-  /** 对话框宽度，示例：320, '500px', '80%' */
-  width: {
-    type: [String, Number] as PropType<TdDialogProps['width']>,
-  },
-  /** 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */
-  zIndex: {
-    type: Number,
-  },
-  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
-  onCancel: Function as PropType<TdDialogProps['onCancel']>,
-  /** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
-  onClose: Function as PropType<TdDialogProps['onClose']>,
-  /** 对话框消失动画效果结束后触发 */
-  onClosed: Function as PropType<TdDialogProps['onClosed']>,
-  /** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
-  onConfirm: Function as PropType<TdDialogProps['onConfirm']>,
-  /** 如果蒙层存在，点击蒙层时触发 */
-  onOverlayClick: Function as PropType<TdDialogProps['onOverlayClick']>,
-};
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/type.ts b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
index b00e1f485..e69de29bb 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/type.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
@@ -1,139 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { ButtonProps } from '../button';
-import { OverlayProps } from '../overlay';
-import { TNode } from '../common';
-
-export interface TdDialogProps {
-  /**
-   * 操作栏
-   */
-  actions?: Array<ButtonProps>;
-  /**
-   * 多按钮排列方式
-   * @default horizontal
-   */
-  buttonLayout?: 'horizontal' | 'vertical';
-  /**
-   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
-   */
-  cancelBtn?: string | ButtonProps | TNode | null;
-  /**
-   * 多按钮排列方式。可选项：true/false
-   * @default false
-   */
-  closeBtn?: boolean;
-  /**
-   * 点击蒙层时是否触发关闭事件
-   * @default false
-   */
-  closeOnOverlayClick?: boolean;
-  /**
-   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
-   */
-  confirmBtn?: string | ButtonProps | TNode | null;
-  /**
-   * 内容
-   */
-  content?: string | TNode;
-  /**
-   * 是否在关闭弹框的时候销毁子元素
-   * @default false
-   */
-  destroyOnClose?: boolean;
-  /**
-   * 透传至 Overlay 组件
-   * @default {}
-   */
-  overlayProps?: OverlayProps;
-  /**
-   * 防止滚动穿透
-   * @default true
-   */
-  preventScrollThrough?: boolean;
-  /**
-   * 是否显示遮罩层
-   * @default true
-   */
-  showOverlay?: boolean;
-  /**
-   * 标题
-   */
-  title?: string | TNode;
-  /**
-   * 控制对话框是否显示
-   */
-  visible?: boolean;
-  /**
-   * 对话框宽度，示例：320, '500px', '80%'
-   */
-  width?: string | number;
-  /**
-   * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
-   */
-  zIndex?: number;
-  /**
-   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
-   */
-  onCancel?: (context: { e: MouseEvent }) => void;
-  /**
-   * 关闭事件，点击 取消按钮 或 点击蒙层 时触发
-   */
-  onClose?: (context: DialogCloseContext) => void;
-  /**
-   * 对话框消失动画效果结束后触发
-   */
-  onClosed?: () => void;
-  /**
-   * 如果“确认”按钮存在，则点击“确认”按钮时触发
-   */
-  onConfirm?: (context: { e: MouseEvent }) => void;
-  /**
-   * 如果蒙层存在，点击蒙层时触发
-   */
-  onOverlayClick?: (context: { e: MouseEvent }) => void;
-}
-
-export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
-  /**
-   * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second'
-   * @default ''
-   */
-  className?: string;
-}
-
-export interface DialogInstance {
-  /**
-   * 销毁弹框
-   */
-  destroy: () => void;
-  /**
-   * 隐藏弹框
-   */
-  hide: () => void;
-  /**
-   * 显示弹框
-   */
-  show: () => void;
-  /**
-   * 更新弹框内容
-   */
-  update: (props: DialogOptions) => void;
-}
-
-export type DialogEventSource = 'cancel' | 'overlay';
-
-export interface DialogCloseContext {
-  trigger: DialogEventSource;
-  e: MouseEvent;
-}
-
-export type DialogMethod = (options?: DialogOptions) => DialogInstance;
-
-export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance;
-
-export type DialogAlertMethod = (options?: Omit<DialogOptions, 'cancelBtn'>) => DialogInstance;
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-card-props.ts b/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
index 06951ece0..e69de29bb 100644
--- a/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
@@ -1,8 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-export default {
-};
diff --git a/packages/products/tdesign-vue-next/src/dialog/props.ts b/packages/products/tdesign-vue-next/src/dialog/props.ts
index f93324a05..e69de29bb 100644
--- a/packages/products/tdesign-vue-next/src/dialog/props.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/props.ts
@@ -1,142 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { TdDialogProps } from './type';
-import { PropType } from 'vue';
-
-export default {
-  /** 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
-  attach: {
-    type: [String, Function] as PropType<TdDialogProps['attach']>,
-  },
-  /** 对话框内容 */
-  body: {
-    type: [String, Function] as PropType<TdDialogProps['body']>,
-  },
-  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
-  cancelBtn: {
-    type: [String, Object, Function] as PropType<TdDialogProps['cancelBtn']>,
-  },
-  /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */
-  closeBtn: {
-    type: [String, Boolean, Function] as PropType<TdDialogProps['closeBtn']>,
-    default: true as TdDialogProps['closeBtn'],
-  },
-  /** 按下 ESC 时是否触发对话框关闭事件 */
-  closeOnEscKeydown: {
-    type: Boolean,
-    default: undefined,
-  },
-  /** 点击蒙层时是否触发关闭事件 */
-  closeOnOverlayClick: Boolean,
-  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
-  confirmBtn: {
-    type: [String, Object, Function] as PropType<TdDialogProps['confirmBtn']>,
-  },
-  /** 确认按钮加载状态 */
-  confirmLoading: {
-    type: Boolean,
-    default: undefined,
-  },
-  /** 是否在按下回车键时，触发确认事件 */
-  confirmOnEnter: Boolean,
-  /** 对话框内容，同 body */
-  default: {
-    type: [String, Function] as PropType<TdDialogProps['default']>,
-  },
-  /** 是否在关闭弹框的时候销毁子元素 */
-  destroyOnClose: Boolean,
-  /** 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' */
-  dialogClassName: {
-    type: String,
-    default: '',
-  },
-  /** 作用于对话框本身的样式 */
-  dialogStyle: {
-    type: Object as PropType<TdDialogProps['dialogStyle']>,
-  },
-  /** 对话框是否可以拖拽（仅在非模态对话框时有效） */
-  draggable: Boolean,
-  /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 */
-  footer: {
-    type: [Boolean, Function] as PropType<TdDialogProps['footer']>,
-    default: true as TdDialogProps['footer'],
-  },
-  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 */
-  header: {
-    type: [String, Boolean, Function] as PropType<TdDialogProps['header']>,
-    default: true as TdDialogProps['header'],
-  },
-  /** 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */
-  mode: {
-    type: String as PropType<TdDialogProps['mode']>,
-    default: 'modal' as TdDialogProps['mode'],
-    validator(val: TdDialogProps['mode']): boolean {
-      if (!val) return true;
-      return ['modal', 'modeless', 'full-screen'].includes(val);
-    },
-  },
-  /** 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小 */
-  placement: {
-    type: String as PropType<TdDialogProps['placement']>,
-    default: 'top' as TdDialogProps['placement'],
-    validator(val: TdDialogProps['placement']): boolean {
-      if (!val) return true;
-      return ['top', 'center'].includes(val);
-    },
-  },
-  /** 防止滚动穿透 */
-  preventScrollThrough: {
-    type: Boolean,
-    default: true,
-  },
-  /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */
-  showInAttachedElement: Boolean,
-  /** 是否显示遮罩层 */
-  showOverlay: {
-    type: Boolean,
-    default: true,
-  },
-  /** 对话框风格 */
-  theme: {
-    type: String as PropType<TdDialogProps['theme']>,
-    default: 'default' as TdDialogProps['theme'],
-    validator(val: TdDialogProps['theme']): boolean {
-      if (!val) return true;
-      return ['default', 'info', 'warning', 'danger', 'success'].includes(val);
-    },
-  },
-  /** 用于弹框具体窗口顶部的距离，优先级大于 placement */
-  top: {
-    type: [String, Number] as PropType<TdDialogProps['top']>,
-  },
-  /** 控制对话框是否显示 */
-  visible: Boolean,
-  /** 对话框宽度，示例：320, '500px', '80%' */
-  width: {
-    type: [String, Number] as PropType<TdDialogProps['width']>,
-  },
-  /** 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */
-  zIndex: {
-    type: Number,
-  },
-  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
-  onCancel: Function as PropType<TdDialogProps['onCancel']>,
-  /** 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发 */
-  onClose: Function as PropType<TdDialogProps['onClose']>,
-  /** 点击右上角关闭按钮时触发 */
-  onCloseBtnClick: Function as PropType<TdDialogProps['onCloseBtnClick']>,
-  /** 对话框消失动画效果结束后触发 */
-  onClosed: Function as PropType<TdDialogProps['onClosed']>,
-  /** 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 */
-  onConfirm: Function as PropType<TdDialogProps['onConfirm']>,
-  /** 按下 ESC 时触发事件 */
-  onEscKeydown: Function as PropType<TdDialogProps['onEscKeydown']>,
-  /** 对话框弹出动画效果结束后触发 */
-  onOpened: Function as PropType<TdDialogProps['onOpened']>,
-  /** 如果蒙层存在，点击蒙层时触发 */
-  onOverlayClick: Function as PropType<TdDialogProps['onOverlayClick']>,
-};
diff --git a/packages/products/tdesign-vue-next/src/dialog/type.ts b/packages/products/tdesign-vue-next/src/dialog/type.ts
index 55678a951..e69de29bb 100644
--- a/packages/products/tdesign-vue-next/src/dialog/type.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/type.ts
@@ -1,228 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { ButtonProps } from '../button';
-import { TNode, Styles, AttachNode } from '../common';
-
-export interface TdDialogProps {
-  /**
-   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
-   */
-  attach?: AttachNode;
-  /**
-   * 对话框内容
-   */
-  body?: string | TNode;
-  /**
-   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
-   */
-  cancelBtn?: string | ButtonProps | TNode | null;
-  /**
-   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
-   * @default true
-   */
-  closeBtn?: string | boolean | TNode;
-  /**
-   * 按下 ESC 时是否触发对话框关闭事件
-   */
-  closeOnEscKeydown?: boolean;
-  /**
-   * 点击蒙层时是否触发关闭事件
-   * @default false
-   */
-  closeOnOverlayClick?: boolean;
-  /**
-   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
-   */
-  confirmBtn?: string | ButtonProps | TNode | null;
-  /**
-   * 确认按钮加载状态
-   */
-  confirmLoading?: boolean;
-  /**
-   * 是否在按下回车键时，触发确认事件
-   */
-  confirmOnEnter?: boolean;
-  /**
-   * 对话框内容，同 body
-   */
-  default?: string | TNode;
-  /**
-   * 是否在关闭弹框的时候销毁子元素
-   * @default false
-   */
-  destroyOnClose?: boolean;
-  /**
-   * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
-   * @default ''
-   */
-  dialogClassName?: string;
-  /**
-   * 作用于对话框本身的样式
-   */
-  dialogStyle?: Styles;
-  /**
-   * 对话框是否可以拖拽（仅在非模态对话框时有效）
-   * @default false
-   */
-  draggable?: boolean;
-  /**
-   * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容
-   * @default true
-   */
-  footer?: boolean | TNode;
-  /**
-   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容
-   * @default true
-   */
-  header?: string | boolean | TNode;
-  /**
-   * 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
-   * @default modal
-   */
-  mode?: 'modal' | 'modeless' | 'full-screen';
-  /**
-   * 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小
-   * @default top
-   */
-  placement?: 'top' | 'center';
-  /**
-   * 防止滚动穿透
-   * @default true
-   */
-  preventScrollThrough?: boolean;
-  /**
-   * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
-   * @default false
-   */
-  showInAttachedElement?: boolean;
-  /**
-   * 是否显示遮罩层
-   * @default true
-   */
-  showOverlay?: boolean;
-  /**
-   * 对话框风格
-   * @default default
-   */
-  theme?: 'default' | 'info' | 'warning' | 'danger' | 'success';
-  /**
-   * 用于弹框具体窗口顶部的距离，优先级大于 placement
-   */
-  top?: string | number;
-  /**
-   * 控制对话框是否显示
-   */
-  visible?: boolean;
-  /**
-   * 对话框宽度，示例：320, '500px', '80%'
-   */
-  width?: string | number;
-  /**
-   * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
-   */
-  zIndex?: number;
-  /**
-   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
-   */
-  onCancel?: (context: { e: MouseEvent }) => void;
-  /**
-   * 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发
-   */
-  onClose?: (context: DialogCloseContext) => void;
-  /**
-   * 点击右上角关闭按钮时触发
-   */
-  onCloseBtnClick?: (context: { e: MouseEvent }) => void;
-  /**
-   * 对话框消失动画效果结束后触发
-   */
-  onClosed?: () => void;
-  /**
-   * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发
-   */
-  onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void;
-  /**
-   * 按下 ESC 时触发事件
-   */
-  onEscKeydown?: (context: { e: KeyboardEvent }) => void;
-  /**
-   * 对话框弹出动画效果结束后触发
-   */
-  onOpened?: () => void;
-  /**
-   * 如果蒙层存在，点击蒙层时触发
-   */
-  onOverlayClick?: (context: { e: MouseEvent }) => void;
-}
-
-export interface TdDialogCardProps
-  extends Pick<
-    TdDialogProps,
-    | 'body'
-    | 'cancelBtn'
-    | 'closeBtn'
-    | 'confirmBtn'
-    | 'footer'
-    | 'header'
-    | 'theme'
-    | 'onCancel'
-    | 'onCloseBtnClick'
-    | 'onConfirm'
-  > {}
-
-export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
-  /**
-   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
-   * @default 'body'
-   */
-  attach?: AttachNode;
-  /**
-   * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second'
-   * @default ''
-   */
-  className?: string;
-  /**
-   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
-   */
-  style?: string | Styles;
-}
-
-export interface DialogInstance {
-  /**
-   * 销毁弹框
-   */
-  destroy: () => void;
-  /**
-   * 隐藏弹框
-   */
-  hide: () => void;
-  /**
-   * 设置确认按钮加载状态
-   */
-  setConfirmLoading: (loading: boolean) => void;
-  /**
-   * 显示弹框
-   */
-  show: () => void;
-  /**
-   * 更新弹框内容
-   */
-  update: (props: DialogOptions) => void;
-}
-
-export type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
-
-export interface DialogCloseContext {
-  trigger: DialogEventSource;
-  e: MouseEvent | KeyboardEvent;
-}
-
-export type DialogMethod = (options?: DialogOptions) => DialogInstance;
-
-export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance;
-
-export type DialogAlertMethod = (options?: Omit<DialogOptions, 'cancelBtn'>) => DialogInstance;
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..d244e0dbe 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 })` | \-
@@ -67,7 +70,6 @@ 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<DialogProps, 'attach'>` | \- | - | extends `Omit<DialogProps, 'attach'>` | N
 
 ### DialogInstance
diff --git a/packages/products/tdesign-vue/src/dialog/dialog.md b/packages/products/tdesign-vue/src/dialog/dialog.md
index 49e808178..c07a36a03 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 })` | 点击右上角关闭按钮时触发
@@ -67,7 +70,6 @@ overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙
 -- | -- | -- | -- | --
 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-dialog-first t-class-dialog-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<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部属性 | N
 
 ### DialogInstance
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..fec821e27 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;
   /**
    * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
    */
@@ -185,10 +193,6 @@ export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
    * @default ''
    */
   className?: string;
-  /**
-   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
-   */
-  style?: string | Styles;
 }
 
 export interface DialogInstance {
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 a95df47d3..10ce253b1 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -40074,6 +40074,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": [
@@ -42993,6 +43079,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": [

From ceb674cbde3c4a2c0573510927b5c811f71d29ea Mon Sep 17 00:00:00 2001
From: Wesley <985189328@qq.com>
Date: Wed, 13 Nov 2024 07:46:08 +0800
Subject: [PATCH 2/2] fix

---
 .../src/dialog/dialog.en-US.md                |   5 +-
 .../tdesign-mobile-vue/src/dialog/dialog.md   |   5 +-
 .../tdesign-mobile-vue/src/dialog/props.ts    |  85 +++++++
 .../tdesign-mobile-vue/src/dialog/type.ts     | 147 +++++++++++
 .../src/dialog/dialog-card-props.ts           |   8 +
 .../src/dialog/dialog.en-US.md                |   6 +-
 .../tdesign-vue-next/src/dialog/dialog.md     |   6 +-
 .../tdesign-vue-next/src/dialog/props.ts      | 146 +++++++++++
 .../tdesign-vue-next/src/dialog/type.ts       | 232 ++++++++++++++++++
 9 files changed, 634 insertions(+), 6 deletions(-)

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 e69de29bb..e974c4f81 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/props.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/props.ts
@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDialogProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 操作栏 */
+  actions: {
+    type: [Array, Function] as PropType<TdDialogProps['actions']>,
+  },
+  /** 多按钮排列方式 */
+  buttonLayout: {
+    type: String as PropType<TdDialogProps['buttonLayout']>,
+    default: 'horizontal' as TdDialogProps['buttonLayout'],
+    validator(val: TdDialogProps['buttonLayout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
+  cancelBtn: {
+    type: [String, Object, Function] as PropType<TdDialogProps['cancelBtn']>,
+  },
+  /** 多按钮排列方式。可选项：true/false */
+  closeBtn: Boolean,
+  /** 点击蒙层时是否触发关闭事件 */
+  closeOnOverlayClick: Boolean,
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
+  confirmBtn: {
+    type: [String, Object, Function] as PropType<TdDialogProps['confirmBtn']>,
+  },
+  /** 内容 */
+  content: {
+    type: [String, Function] as PropType<TdDialogProps['content']>,
+  },
+  /** 是否在关闭弹框的时候销毁子元素 */
+  destroyOnClose: Boolean,
+  /** 透传至 Overlay 组件 */
+  overlayProps: {
+    type: Object as PropType<TdDialogProps['overlayProps']>,
+    default: () => ({}),
+  },
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标题 */
+  title: {
+    type: [String, Function] as PropType<TdDialogProps['title']>,
+  },
+  /** 控制对话框是否显示 */
+  visible: Boolean,
+  /** 对话框宽度，示例：320, '500px', '80%' */
+  width: {
+    type: [String, Number] as PropType<TdDialogProps['width']>,
+  },
+  /** 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */
+  zIndex: {
+    type: Number,
+  },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDialogProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDialogProps['onBeforeOpen']>,
+  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
+  onCancel: Function as PropType<TdDialogProps['onCancel']>,
+  /** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
+  onClose: Function as PropType<TdDialogProps['onClose']>,
+  /** 对话框消失动画效果结束后触发 */
+  onClosed: Function as PropType<TdDialogProps['onClosed']>,
+  /** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
+  onConfirm: Function as PropType<TdDialogProps['onConfirm']>,
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: Function as PropType<TdDialogProps['onOverlayClick']>,
+};
diff --git a/packages/products/tdesign-mobile-vue/src/dialog/type.ts b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
index e69de29bb..93c6b7d59 100644
--- a/packages/products/tdesign-mobile-vue/src/dialog/type.ts
+++ b/packages/products/tdesign-mobile-vue/src/dialog/type.ts
@@ -0,0 +1,147 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { ButtonProps } from '../button';
+import { OverlayProps } from '../overlay';
+import { TNode } from '../common';
+
+export interface TdDialogProps {
+  /**
+   * 操作栏
+   */
+  actions?: Array<ButtonProps>;
+  /**
+   * 多按钮排列方式
+   * @default horizontal
+   */
+  buttonLayout?: 'horizontal' | 'vertical';
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
+   */
+  cancelBtn?: string | ButtonProps | TNode | null;
+  /**
+   * 多按钮排列方式。可选项：true/false
+   * @default false
+   */
+  closeBtn?: boolean;
+  /**
+   * 点击蒙层时是否触发关闭事件
+   * @default false
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
+   */
+  confirmBtn?: string | ButtonProps | TNode | null;
+  /**
+   * 内容
+   */
+  content?: string | TNode;
+  /**
+   * 是否在关闭弹框的时候销毁子元素
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 透传至 Overlay 组件
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 标题
+   */
+  title?: string | TNode;
+  /**
+   * 控制对话框是否显示
+   */
+  visible?: boolean;
+  /**
+   * 对话框宽度，示例：320, '500px', '80%'
+   */
+  width?: string | number;
+  /**
+   * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
+   */
+  onCancel?: (context: { e: MouseEvent }) => void;
+  /**
+   * 关闭事件，点击 取消按钮 或 点击蒙层 时触发
+   */
+  onClose?: (context: DialogCloseContext) => void;
+  /**
+   * 对话框消失动画效果结束后触发
+   */
+  onClosed?: () => void;
+  /**
+   * 如果“确认”按钮存在，则点击“确认”按钮时触发
+   */
+  onConfirm?: (context: { e: MouseEvent }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent }) => void;
+}
+
+export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
+  /**
+   * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second'
+   * @default ''
+   */
+  className?: string;
+}
+
+export interface DialogInstance {
+  /**
+   * 销毁弹框
+   */
+  destroy: () => void;
+  /**
+   * 隐藏弹框
+   */
+  hide: () => void;
+  /**
+   * 显示弹框
+   */
+  show: () => void;
+  /**
+   * 更新弹框内容
+   */
+  update: (props: DialogOptions) => void;
+}
+
+export type DialogEventSource = 'cancel' | 'overlay';
+
+export interface DialogCloseContext {
+  trigger: DialogEventSource;
+  e: MouseEvent;
+}
+
+export type DialogMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogAlertMethod = (options?: Omit<DialogOptions, 'cancelBtn'>) => DialogInstance;
diff --git a/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts b/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
index e69de29bb..06951ece0 100644
--- a/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/dialog-card-props.ts
@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+};
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..a1aa88f2e 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 })` | \-
@@ -67,7 +70,6 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts) | N
 `Omit<DialogProps, 'attach'>` | \- | - | extends `Omit<DialogProps, 'attach'>` | N
 
 ### DialogInstance
diff --git a/packages/products/tdesign-vue-next/src/dialog/dialog.md b/packages/products/tdesign-vue-next/src/dialog/dialog.md
index 2679b2cbc..0f1b5a466 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 })` | 点击右上角关闭按钮时触发
@@ -67,7 +70,6 @@ overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙
 -- | -- | -- | -- | --
 attach | String / Function | 'body' | 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-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-next/blob/develop/src/common.ts) | N
 `Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部属性 | N
 
 ### DialogInstance
diff --git a/packages/products/tdesign-vue-next/src/dialog/props.ts b/packages/products/tdesign-vue-next/src/dialog/props.ts
index e69de29bb..79b6eab38 100644
--- a/packages/products/tdesign-vue-next/src/dialog/props.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/props.ts
@@ -0,0 +1,146 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDialogProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
+  attach: {
+    type: [String, Function] as PropType<TdDialogProps['attach']>,
+  },
+  /** 对话框内容 */
+  body: {
+    type: [String, Function] as PropType<TdDialogProps['body']>,
+  },
+  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
+  cancelBtn: {
+    type: [String, Object, Function] as PropType<TdDialogProps['cancelBtn']>,
+  },
+  /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */
+  closeBtn: {
+    type: [String, Boolean, Function] as PropType<TdDialogProps['closeBtn']>,
+    default: true as TdDialogProps['closeBtn'],
+  },
+  /** 按下 ESC 时是否触发对话框关闭事件 */
+  closeOnEscKeydown: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 点击蒙层时是否触发关闭事件 */
+  closeOnOverlayClick: Boolean,
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
+  confirmBtn: {
+    type: [String, Object, Function] as PropType<TdDialogProps['confirmBtn']>,
+  },
+  /** 确认按钮加载状态 */
+  confirmLoading: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否在按下回车键时，触发确认事件 */
+  confirmOnEnter: Boolean,
+  /** 对话框内容，同 body */
+  default: {
+    type: [String, Function] as PropType<TdDialogProps['default']>,
+  },
+  /** 是否在关闭弹框的时候销毁子元素 */
+  destroyOnClose: Boolean,
+  /** 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' */
+  dialogClassName: {
+    type: String,
+    default: '',
+  },
+  /** 作用于对话框本身的样式 */
+  dialogStyle: {
+    type: Object as PropType<TdDialogProps['dialogStyle']>,
+  },
+  /** 对话框是否可以拖拽（仅在非模态对话框时有效） */
+  draggable: Boolean,
+  /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 */
+  footer: {
+    type: [Boolean, Function] as PropType<TdDialogProps['footer']>,
+    default: true as TdDialogProps['footer'],
+  },
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 */
+  header: {
+    type: [String, Boolean, Function] as PropType<TdDialogProps['header']>,
+    default: true as TdDialogProps['header'],
+  },
+  /** 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */
+  mode: {
+    type: String as PropType<TdDialogProps['mode']>,
+    default: 'modal' as TdDialogProps['mode'],
+    validator(val: TdDialogProps['mode']): boolean {
+      if (!val) return true;
+      return ['modal', 'modeless', 'full-screen'].includes(val);
+    },
+  },
+  /** 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小 */
+  placement: {
+    type: String as PropType<TdDialogProps['placement']>,
+    default: 'top' as TdDialogProps['placement'],
+    validator(val: TdDialogProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'center'].includes(val);
+    },
+  },
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */
+  showInAttachedElement: Boolean,
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 对话框风格 */
+  theme: {
+    type: String as PropType<TdDialogProps['theme']>,
+    default: 'default' as TdDialogProps['theme'],
+    validator(val: TdDialogProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'info', 'warning', 'danger', 'success'].includes(val);
+    },
+  },
+  /** 用于弹框具体窗口顶部的距离，优先级大于 placement */
+  top: {
+    type: [String, Number] as PropType<TdDialogProps['top']>,
+  },
+  /** 控制对话框是否显示 */
+  visible: Boolean,
+  /** 对话框宽度，示例：320, '500px', '80%' */
+  width: {
+    type: [String, Number] as PropType<TdDialogProps['width']>,
+  },
+  /** 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 */
+  zIndex: {
+    type: Number,
+  },
+  /** 对话框执行消失动画效果前触发 */
+  onBeforeClose: Function as PropType<TdDialogProps['onBeforeClose']>,
+  /** 对话框执行弹出动画效果前触发 */
+  onBeforeOpen: Function as PropType<TdDialogProps['onBeforeOpen']>,
+  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
+  onCancel: Function as PropType<TdDialogProps['onCancel']>,
+  /** 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发 */
+  onClose: Function as PropType<TdDialogProps['onClose']>,
+  /** 点击右上角关闭按钮时触发 */
+  onCloseBtnClick: Function as PropType<TdDialogProps['onCloseBtnClick']>,
+  /** 对话框消失动画效果结束后触发 */
+  onClosed: Function as PropType<TdDialogProps['onClosed']>,
+  /** 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 */
+  onConfirm: Function as PropType<TdDialogProps['onConfirm']>,
+  /** 按下 ESC 时触发事件 */
+  onEscKeydown: Function as PropType<TdDialogProps['onEscKeydown']>,
+  /** 对话框弹出动画效果结束后触发 */
+  onOpened: Function as PropType<TdDialogProps['onOpened']>,
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: Function as PropType<TdDialogProps['onOverlayClick']>,
+};
diff --git a/packages/products/tdesign-vue-next/src/dialog/type.ts b/packages/products/tdesign-vue-next/src/dialog/type.ts
index e69de29bb..fec821e27 100644
--- a/packages/products/tdesign-vue-next/src/dialog/type.ts
+++ b/packages/products/tdesign-vue-next/src/dialog/type.ts
@@ -0,0 +1,232 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { ButtonProps } from '../button';
+import { TNode, Styles, AttachNode } from '../common';
+
+export interface TdDialogProps {
+  /**
+   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   */
+  attach?: AttachNode;
+  /**
+   * 对话框内容
+   */
+  body?: string | TNode;
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
+   */
+  cancelBtn?: string | ButtonProps | TNode | null;
+  /**
+   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
+   * @default true
+   */
+  closeBtn?: string | boolean | TNode;
+  /**
+   * 按下 ESC 时是否触发对话框关闭事件
+   */
+  closeOnEscKeydown?: boolean;
+  /**
+   * 点击蒙层时是否触发关闭事件
+   * @default false
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
+   */
+  confirmBtn?: string | ButtonProps | TNode | null;
+  /**
+   * 确认按钮加载状态
+   */
+  confirmLoading?: boolean;
+  /**
+   * 是否在按下回车键时，触发确认事件
+   */
+  confirmOnEnter?: boolean;
+  /**
+   * 对话框内容，同 body
+   */
+  default?: string | TNode;
+  /**
+   * 是否在关闭弹框的时候销毁子元素
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
+   * @default ''
+   */
+  dialogClassName?: string;
+  /**
+   * 作用于对话框本身的样式
+   */
+  dialogStyle?: Styles;
+  /**
+   * 对话框是否可以拖拽（仅在非模态对话框时有效）
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容
+   * @default true
+   */
+  footer?: boolean | TNode;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容
+   * @default true
+   */
+  header?: string | boolean | TNode;
+  /**
+   * 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
+   * @default modal
+   */
+  mode?: 'modal' | 'modeless' | 'full-screen';
+  /**
+   * 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小
+   * @default top
+   */
+  placement?: 'top' | 'center';
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+   * @default false
+   */
+  showInAttachedElement?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 对话框风格
+   * @default default
+   */
+  theme?: 'default' | 'info' | 'warning' | 'danger' | 'success';
+  /**
+   * 用于弹框具体窗口顶部的距离，优先级大于 placement
+   */
+  top?: string | number;
+  /**
+   * 控制对话框是否显示
+   */
+  visible?: boolean;
+  /**
+   * 对话框宽度，示例：320, '500px', '80%'
+   */
+  width?: string | number;
+  /**
+   * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
+   */
+  onCancel?: (context: { e: MouseEvent }) => void;
+  /**
+   * 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发
+   */
+  onClose?: (context: DialogCloseContext) => void;
+  /**
+   * 点击右上角关闭按钮时触发
+   */
+  onCloseBtnClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 对话框消失动画效果结束后触发
+   */
+  onClosed?: () => void;
+  /**
+   * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发
+   */
+  onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void;
+  /**
+   * 按下 ESC 时触发事件
+   */
+  onEscKeydown?: (context: { e: KeyboardEvent }) => void;
+  /**
+   * 对话框弹出动画效果结束后触发
+   */
+  onOpened?: () => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent }) => void;
+}
+
+export interface TdDialogCardProps
+  extends Pick<
+    TdDialogProps,
+    | 'body'
+    | 'cancelBtn'
+    | 'closeBtn'
+    | 'confirmBtn'
+    | 'footer'
+    | 'header'
+    | 'theme'
+    | 'onCancel'
+    | 'onCloseBtnClick'
+    | 'onConfirm'
+  > {}
+
+export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
+  /**
+   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second'
+   * @default ''
+   */
+  className?: string;
+}
+
+export interface DialogInstance {
+  /**
+   * 销毁弹框
+   */
+  destroy: () => void;
+  /**
+   * 隐藏弹框
+   */
+  hide: () => void;
+  /**
+   * 设置确认按钮加载状态
+   */
+  setConfirmLoading: (loading: boolean) => void;
+  /**
+   * 显示弹框
+   */
+  show: () => void;
+  /**
+   * 更新弹框内容
+   */
+  update: (props: DialogOptions) => void;
+}
+
+export type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
+
+export interface DialogCloseContext {
+  trigger: DialogEventSource;
+  e: MouseEvent | KeyboardEvent;
+}
+
+export type DialogMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogAlertMethod = (options?: Omit<DialogOptions, 'cancelBtn'>) => DialogInstance;