From b32a553ce63c335bd712d72b6cd991063703c619 Mon Sep 17 00:00:00 2001 From: Rylan Date: Wed, 12 Nov 2025 03:59:02 +0800 Subject: [PATCH] feat(dialog): support `draggable` in `modal` mode --- db/TDesign.db | Bin 1085440 -> 1085440 bytes .../components/dialog/dialog.en-US.md | 61 ++++++------ .../packages/components/dialog/dialog.md | 5 +- .../packages/components/dialog/type.ts | 2 +- .../packages/components/common.ts | 6 +- .../components/dialog/dialog.en-US.md | 88 +++++++++--------- .../packages/components/dialog/dialog.md | 16 ++-- .../packages/components/dialog/props.ts | 2 +- .../packages/components/dialog/type.ts | 3 +- .../tdesign-vue/src/dialog/dialog.en-US.md | 86 ++++++++--------- .../products/tdesign-vue/src/dialog/dialog.md | 20 ++-- .../products/tdesign-vue/src/dialog/props.ts | 2 +- .../products/tdesign-vue/src/dialog/type.ts | 11 ++- packages/scripts/api.json | 4 +- 14 files changed, 153 insertions(+), 153 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index c79996e5d7a10f43413a12ac04d94fc5811dd1ca..13dfe184cdabfecddbb82060873be44178da6ae4 100644 GIT binary patch delta 292 zcmV+<0o(q7phAG4LXaB)Mv)vt1x5fac8IZLonI*c000pHX8;Ze49yHs3rh;_3DXFd z2L1(~1u+D@0A~Zw10({L0sa9KlOf=8Kl*i@oo>h~=-j<%Ou_v5)1ix#+K*=Ank>m!RgA zi0{0KZf|rTWoBk&V{~bDWguy8AYf*7Y-}xaV{&C>ZeSp7Z)9bYcV;F9foLHb0hi#V z2o;lUV$rigW4{8Eoo3>*hiCW#vx90p0kg+zcmcCRZM_1sTVVJBf^dd#0fuk_hHwLh qa0G^M1%_}2hHwXla0rHQ35IYAhHwjpa14fU4Tf+IhHww2a1bCmJaE1M delta 345 zcmZoz;MB0dX@WGP>qHr6R#yhSHqDJGbK^Cc?HB|Zq8S*X`Hu2=@H+E6;y%vR%<+u9 zon4S^E*m4OFiQsWEoLXC;E9eBY)xz;QjCn#6*KsSH*@6uU}SB~P?Tbv{$MGG=w#i* zi!AK*3@n@fCGKacZd#sYW_% z&Ykyc#lmL|jR?ilw>_KF`D|*(`#qgT21W+Dh6cJulfNa%PTrgHh=Z%1frF7zk#qC> z)E`VN-1~vx18p~$y?7d7)1#Jb4Z3Rqi1Z3S#? i1?+7F9Bl=hZ3SFy1>9`~JZ%NMZ3TR71^mkj1QY=5X?yAb diff --git a/packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md b/packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md index 7129dcf79..f9407aacb 100644 --- a/packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md +++ b/packages/products/tdesign-react/packages/components/dialog/dialog.en-US.md @@ -1,13 +1,14 @@ :: BASE_DOC :: ## API + ### DialogCard Props name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -`Pick` | TNode | - | extends `Pick`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +`Pick` | TNode | - | extends `Pick`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### Dialog Props @@ -15,54 +16,54 @@ style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProper 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-react/blob/develop/packages/components/common.ts) | N -body | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -cancelBtn | TNode | - | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -closeBtn | TNode | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | 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-react/blob/develop/packages/components/common.ts) | N +body | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cancelBtn | TNode | - | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N +children | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +closeBtn | TNode | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N closeOnEscKeydown | Boolean | true | trigger dialog close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N -confirmBtn | TNode | - | Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +confirmBtn | TNode | - | Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N confirmLoading | Boolean | undefined | confirm button loading status | N confirmOnEnter | Boolean | - | confirm on enter | N destroyOnClose | Boolean | false | \- | N dialogClassName | String | - | \- | N -dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -draggable | Boolean | false | \- | N -footer | TNode | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +draggable | Boolean | false | not effective in `full-screen` mode | N +footer | TNode | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N forceRender | Boolean | false | to force render Dialog | N -header | TNode | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +header | TNode | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | false | Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable | N mode | String | modal | options: modal/modeless/normal/full-screen | N placement | String | top | options: top/center | N preventScrollThrough | Boolean | true | \- | N showInAttachedElement | Boolean | false | \- | N showOverlay | Boolean | true | \- | N -sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript:`boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N +sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript: `boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts) | N theme | String | default | options: default/info/warning/danger/success | N top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N -onBeforeClose | Function | | Typescript:`() => void`
| N -onBeforeOpen | Function | | Typescript:`() => void`
| N -onCancel | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClose | Function | | Typescript:`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N -onCloseBtnClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClosed | Function | | Typescript:`() => void`
| N -onConfirm | Function | | Typescript:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N -onEscKeydown | Function | | Typescript:`(context: { e: KeyboardEvent }) => void`
| N -onOpened | Function | | Typescript:`() => void`
| N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N +onBeforeClose | Function | | Typescript: `() => void`
| N +onBeforeOpen | Function | | Typescript: `() => void`
| N +onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClose | Function | | Typescript: `(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | Typescript: `() => void`
| N +onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N +onEscKeydown | Function | | Typescript: `(context: { e: KeyboardEvent }) => void`
| N +onOpened | Function | | Typescript: `() => void`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N ### DialogOptions name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N className | String | - | \- | N -style | Object | - | Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +style | Object | - | Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N `Omit` | \- | - | extends `Omit` | N ### DialogInstance @@ -79,18 +80,16 @@ update | `(props: DialogOptions)` | \- | required name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` - -插件返回值:`DialogInstance` +options | \- | - | Typescript: `DialogOptions` ### dialog.confirm 或 DialogPlugin.confirm name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` +options | \- | - | Typescript: `DialogOptions` ### dialog.alert 或 DialogPlugin.alert name | params | default | description -- | -- | -- | -- -options | Object | - | Typescript:`Omit` +options | Object | - | Typescript: `Omit` diff --git a/packages/products/tdesign-react/packages/components/dialog/dialog.md b/packages/products/tdesign-react/packages/components/dialog/dialog.md index 2edc2b431..cb5b596d6 100644 --- a/packages/products/tdesign-react/packages/components/dialog/dialog.md +++ b/packages/products/tdesign-react/packages/components/dialog/dialog.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### DialogCard Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -29,7 +30,7 @@ confirmOnEnter | Boolean | - | 是否在按下回车键时,触发确认事件 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N dialogClassName | String | - | 弹框元素类名,示例:'t-class-dialog-first t-class-dialog-second' | N dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -draggable | Boolean | false | 对话框是否可以拖拽(仅在非模态对话框时有效) | N +draggable | Boolean | false | 是否可以拖拽(对全屏对话框无效) | N footer | TNode | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 不显示任何内容,值类型为 Function 表示自定义底部内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N forceRender | Boolean | false | 是否强制渲染Dialog | N header | TNode | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 string 则直接显示值,值类型为 Function 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N @@ -81,8 +82,6 @@ update | `(props: DialogOptions)` | \- | 必需。更新弹框内容 -- | -- | -- | -- options | \- | - | TS 类型:`DialogOptions` -插件返回值:`DialogInstance` - ### dialog.confirm 或 DialogPlugin.confirm 参数名称 | 参数类型 | 参数默认值 | 参数描述 diff --git a/packages/products/tdesign-react/packages/components/dialog/type.ts b/packages/products/tdesign-react/packages/components/dialog/type.ts index 5f36a9a7a..d89c2331b 100644 --- a/packages/products/tdesign-react/packages/components/dialog/type.ts +++ b/packages/products/tdesign-react/packages/components/dialog/type.ts @@ -65,7 +65,7 @@ export interface TdDialogProps { */ dialogStyle?: Styles; /** - * 对话框是否可以拖拽(仅在非模态对话框时有效) + * 是否可以拖拽(对全屏对话框无效) * @default false */ draggable?: boolean; diff --git a/packages/products/tdesign-vue-next/packages/components/common.ts b/packages/products/tdesign-vue-next/packages/components/common.ts index 2a381a710..b593c98fe 100644 --- a/packages/products/tdesign-vue-next/packages/components/common.ts +++ b/packages/products/tdesign-vue-next/packages/components/common.ts @@ -41,9 +41,6 @@ export interface UploadDisplayDragEvents { export type ImageEvent = Event; -/** - * 通用全局类型 - * */ export type PlainObject = { [key: string]: any }; export type OptionData = { @@ -63,6 +60,9 @@ export type TreeOptionData = { content?: string | TNode; } & PlainObject; +/** + * 通用全局类型 + * */ export type SizeEnum = 'small' | 'medium' | 'large'; export type ShapeEnum = 'circle' | 'round'; diff --git a/packages/products/tdesign-vue-next/packages/components/dialog/dialog.en-US.md b/packages/products/tdesign-vue-next/packages/components/dialog/dialog.en-US.md index f5e6ba5b8..6ed9f391f 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/dialog.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/dialog/dialog.en-US.md @@ -6,70 +6,70 @@ name | type | default | description | required -- | -- | -- | -- | -- -body | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -cancelBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N -closeBtn | String / Boolean / Slot / Function | true | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N -confirmBtn | String / Object / Slot / Function | true | Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -confirmLoading | Boolean | - | confirm button loading status。Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -footer | Boolean / Slot / Function | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -header | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +body | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +confirmBtn | String / Object / Slot / Function | true | Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +confirmLoading | Boolean | - | confirm button loading status。Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N theme | String | default | options: default/info/warning/danger/success | N -`Pick` | String / Slot / Function | - | extends `Pick`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -onCancel | Function | | Typescript:`(context: { e: MouseEvent }) => void`
options: default/info/warning/danger/success | N -onCloseBtnClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
options: default/info/warning/danger/success | N -onConfirm | Function | | Typescript:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
options: default/info/warning/danger/success | N +`Pick` | String / Slot / Function | - | extends `Pick`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N ### DialogCard Events name | params | description -- | -- | -- -cancel | `(context: { e: MouseEvent })` | options: default/info/warning/danger/success -close-btn-click | `(context: { e: MouseEvent })` | options: default/info/warning/danger/success -confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | options: default/info/warning/danger/success +cancel | `(context: { e: MouseEvent })` | \- +close-btn-click | `(context: { e: MouseEvent })` | \- +confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | \- ### Dialog Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | - | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -body | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -cancelBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N -closeBtn | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +attach | String / Function | - | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +body | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N closeOnEscKeydown | Boolean | true | trigger dialog close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N -confirmBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +confirmBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N confirmLoading | Boolean | undefined | confirm button loading status | N confirmOnEnter | Boolean | - | confirm on enter | N -default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N destroyOnClose | Boolean | false | \- | N dialogClassName | String | - | \- | N -dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -draggable | Boolean | false | \- | N -footer | Boolean / Slot / Function | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -header | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +draggable | Boolean | false | not effective in `full-screen` mode | N +footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N lazy | Boolean | false | Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable | N mode | String | modal | options: modal/modeless/normal/full-screen | N placement | String | top | options: top/center | N preventScrollThrough | Boolean | true | \- | N showInAttachedElement | Boolean | false | \- | N showOverlay | Boolean | true | \- | N -sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript:`boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript: `boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N theme | String | default | options: default/info/warning/danger/success | N top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N -onBeforeClose | Function | | Typescript:`() => void`
| N -onBeforeOpen | Function | | Typescript:`() => void`
| N -onCancel | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClose | Function | | Typescript:`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N -onCloseBtnClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClosed | Function | | Typescript:`() => void`
| N -onConfirm | Function | | Typescript:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N -onEscKeydown | Function | | Typescript:`(context: { e: KeyboardEvent }) => void`
| N -onOpened | Function | | Typescript:`() => void`
| N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N +onBeforeClose | Function | | Typescript: `() => void`
| N +onBeforeOpen | Function | | Typescript: `() => void`
| N +onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClose | Function | | Typescript: `(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | Typescript: `() => void`
| N +onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N +onEscKeydown | Function | | Typescript: `(context: { e: KeyboardEvent }) => void`
| N +onOpened | Function | | Typescript: `() => void`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N ### Dialog Events @@ -90,9 +90,9 @@ overlay-click | `(context: { e: MouseEvent })` | \- name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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/packages/components/common.ts) | N +style | String / Object | - | Typescript: `string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N `Omit` | \- | - | extends `Omit` | N ### DialogInstance @@ -111,10 +111,8 @@ update | `(props: DialogOptions)` | \- | required name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` -context | \- | - | Typescript:`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) - -插件返回值:`DialogInstance` +options | \- | - | Typescript: `DialogOptions` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) ### DialogPlugin.confirm @@ -122,8 +120,8 @@ context | \- | - | Typescript:`AppContext`。[see more ts definition](https:// name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` -context | \- | - | Typescript:`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) +options | \- | - | Typescript: `DialogOptions` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) ### DialogPlugin.alert @@ -131,5 +129,5 @@ context | \- | - | Typescript:`AppContext`。[see more ts definition](https:// name | params | default | description -- | -- | -- | -- -options | Object | - | Typescript:`Omit` -context | \- | - | Typescript:`AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) +options | Object | - | Typescript: `Omit` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) diff --git a/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md b/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md index a196d6621..4f9a73e67 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md +++ b/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md @@ -15,17 +15,17 @@ footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确 header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 string 则直接显示值,值类型为 Function 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N theme | String | default | 对话框风格。可选项:default/info/warning/danger/success | N `Pick` | String / Slot / Function | - | 继承 `Pick` 中的全部属性。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件。可选项:default/info/warning/danger/success | N -onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发。可选项:default/info/warning/danger/success | N -onConfirm | Function | | TS 类型:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发。可选项:default/info/warning/danger/success | N +onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件 | N +onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发 | N +onConfirm | Function | | TS 类型:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发 | N ### DialogCard Events 名称 | 参数 | 描述 -- | -- | -- -cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件。可选项:default/info/warning/danger/success -close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发。可选项:default/info/warning/danger/success -confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发。可选项:default/info/warning/danger/success +cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件 +close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发 +confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发 ### Dialog Props @@ -45,7 +45,7 @@ default | String / Slot / Function | - | 对话框内容,同 body。TS 类型 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N dialogClassName | String | - | 弹框元素类名,示例:'t-class-dialog-first t-class-dialog-second' | N dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -draggable | Boolean | false | 对话框是否可以拖拽(仅在非模态对话框时有效) | N +draggable | Boolean | false | 是否可以拖拽(对全屏对话框无效) | N footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 不显示任何内容,值类型为 Function 表示自定义底部内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 string 则直接显示值,值类型为 Function 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N lazy | Boolean | false | 是否启用对话框懒加载,启用时对话框内的内容不渲染 | N @@ -114,8 +114,6 @@ update | `(props: DialogOptions)` | \- | 必需。更新弹框内容 options | \- | - | TS 类型:`DialogOptions` context | \- | - | 要继承的应用的上下文。TS 类型:`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) -插件返回值:`DialogInstance` - ### DialogPlugin.confirm 同时也支持 `this.$dialog.confirm`。 diff --git a/packages/products/tdesign-vue-next/packages/components/dialog/props.ts b/packages/products/tdesign-vue-next/packages/components/dialog/props.ts index ef813ba53..2764b0be7 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/dialog/props.ts @@ -61,7 +61,7 @@ export default { dialogStyle: { type: Object as PropType, }, - /** 对话框是否可以拖拽(仅在非模态对话框时有效) */ + /** 是否可以拖拽(对全屏对话框无效) */ draggable: Boolean, /** 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 不显示任何内容,值类型为 Function 表示自定义底部内容 */ footer: { diff --git a/packages/products/tdesign-vue-next/packages/components/dialog/type.ts b/packages/products/tdesign-vue-next/packages/components/dialog/type.ts index 8552e7f98..853e3d54e 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/dialog/type.ts @@ -64,7 +64,7 @@ export interface TdDialogProps { */ dialogStyle?: Styles; /** - * 对话框是否可以拖拽(仅在非模态对话框时有效) + * 是否可以拖拽(对全屏对话框无效) * @default false */ draggable?: boolean; @@ -234,6 +234,7 @@ export interface TdDialogCardProps onCancel?: (context: { e: MouseEvent }) => void; /** * 点击右上角关闭按钮时触发 + * @default '' */ onCloseBtnClick?: (context: { e: MouseEvent }) => 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 2db18ebc4..e38bf5571 100644 --- a/packages/products/tdesign-vue/src/dialog/dialog.en-US.md +++ b/packages/products/tdesign-vue/src/dialog/dialog.en-US.md @@ -1,74 +1,75 @@ :: BASE_DOC :: ## API + ### DialogCard Props name | type | default | description | required -- | -- | -- | -- | -- -body | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N -closeBtn | String / Boolean / Slot / Function | true | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N -confirmBtn | String / Object / Slot / Function | true | Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -confirmLoading | Boolean | - | confirm button loading status。Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -footer | Boolean / Slot / Function | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -header | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +body | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +confirmBtn | String / Object / Slot / Function | true | Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +confirmLoading | Boolean | - | confirm button loading status。Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | default | options: default/info/warning/danger/success | N -`Pick` | String / Slot / Function | - | extends `Pick`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -onCancel | Function | | Typescript:`(context: { e: MouseEvent }) => void`
options: default/info/warning/danger/success | N -onCloseBtnClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
options: default/info/warning/danger/success | N -onConfirm | Function | | Typescript:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
options: default/info/warning/danger/success | N +`Pick` | String / Slot / Function | - | extends `Pick`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N ### DialogCard Events name | params | description -- | -- | -- -cancel | `(context: { e: MouseEvent })` | options: default/info/warning/danger/success -close-btn-click | `(context: { e: MouseEvent })` | options: default/info/warning/danger/success -confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | options: default/info/warning/danger/success +cancel | `(context: { e: MouseEvent })` | \- +close-btn-click | `(context: { e: MouseEvent })` | \- +confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | \- ### Dialog Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | - | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -body | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N -closeBtn | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | - | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +body | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | trigger dialog close event on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N -confirmBtn | String / Object / Slot / Function | - | Typescript:`string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +confirmBtn | String / Object / Slot / Function | - | Typescript: `string \| ButtonProps \| TNode \| null`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N confirmLoading | Boolean | undefined | confirm button loading status | N confirmOnEnter | Boolean | - | confirm on enter | N -default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | \- | N dialogClassName | String | - | \- | N -dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -draggable | Boolean | false | \- | N -footer | Boolean / Slot / Function | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -header | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +draggable | Boolean | false | not effective in `full-screen` mode | N +footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N lazy | Boolean | false | Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable | N mode | String | modal | options: modal/modeless/normal/full-screen | N placement | String | top | options: top/center | N preventScrollThrough | Boolean | true | \- | N showInAttachedElement | Boolean | false | \- | N showOverlay | Boolean | true | \- | N -sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript:`boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +sizeDraggable | Boolean / Object | false | allow resizing dialog width/height, set max or min to limit size.。Typescript: `boolean \| DialogSizeDragLimit` `interface DialogSizeDragLimit { maxWidth: number\|undefined, minWidth: number\|undefined, maxHeight: number\|undefined, minHeight: number\|undefined }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N theme | String | default | options: default/info/warning/danger/success | N top | String / Number | - | \- | N visible | Boolean | - | \- | N width | String / Number | - | \- | N zIndex | Number | - | \- | N -onBeforeClose | Function | | Typescript:`() => void`
| N -onBeforeOpen | Function | | Typescript:`() => void`
| N -onCancel | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClose | Function | | Typescript:`(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N -onCloseBtnClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onClosed | Function | | Typescript:`() => void`
| N -onConfirm | Function | | Typescript:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N -onEscKeydown | Function | | Typescript:`(context: { e: KeyboardEvent }) => void`
| N -onOpened | Function | | Typescript:`() => void`
| N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N +onBeforeClose | Function | | Typescript: `() => void`
| N +onBeforeOpen | Function | | Typescript: `() => void`
| N +onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClose | Function | | Typescript: `(context: DialogCloseContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`

`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent \| KeyboardEvent }`
| N +onCloseBtnClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onClosed | Function | | Typescript: `() => void`
| N +onConfirm | Function | | Typescript: `(context: { e: MouseEvent \| KeyboardEvent }) => void`
| N +onEscKeydown | Function | | Typescript: `(context: { e: KeyboardEvent }) => void`
| N +onOpened | Function | | Typescript: `() => void`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N ### Dialog Events @@ -89,9 +90,9 @@ overlay-click | `(context: { e: MouseEvent })` | \- 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 +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 +style | String / Object | - | Typescript: `string \| Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N `Omit` | \- | - | extends `Omit` | N ### DialogInstance @@ -110,9 +111,8 @@ update | `(props: DialogOptions)` | \- | required name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` - -插件返回值:`DialogInstance` +options | \- | - | Typescript: `DialogOptions` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) ### DialogPlugin.confirm @@ -120,7 +120,8 @@ options | \- | - | Typescript:`DialogOptions` name | params | default | description -- | -- | -- | -- -options | \- | - | Typescript:`DialogOptions` +options | \- | - | Typescript: `DialogOptions` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) ### DialogPlugin.alert @@ -128,4 +129,5 @@ options | \- | - | Typescript:`DialogOptions` name | params | default | description -- | -- | -- | -- -options | Object | - | Typescript:`Omit` +options | Object | - | Typescript: `Omit` +context | \- | - | Typescript: `AppContext`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) diff --git a/packages/products/tdesign-vue/src/dialog/dialog.md b/packages/products/tdesign-vue/src/dialog/dialog.md index b9f034811..1484cdb57 100644 --- a/packages/products/tdesign-vue/src/dialog/dialog.md +++ b/packages/products/tdesign-vue/src/dialog/dialog.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### DialogCard Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -14,17 +15,17 @@ footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确 header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 string 则直接显示值,值类型为 Function 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | default | 对话框风格。可选项:default/info/warning/danger/success | N `Pick` | String / Slot / Function | - | 继承 `Pick` 中的全部属性。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件。可选项:default/info/warning/danger/success | N -onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发。可选项:default/info/warning/danger/success | N -onConfirm | Function | | TS 类型:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发。可选项:default/info/warning/danger/success | N +onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件 | N +onCloseBtnClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击右上角关闭按钮时触发 | N +onConfirm | Function | | TS 类型:`(context: { e: MouseEvent \| KeyboardEvent }) => void`
如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发 | N ### DialogCard Events 名称 | 参数 | 描述 -- | -- | -- -cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件。可选项:default/info/warning/danger/success -close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发。可选项:default/info/warning/danger/success -confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发。可选项:default/info/warning/danger/success +cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件 +close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发 +confirm | `(context: { e: MouseEvent \| KeyboardEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发,或者键盘按下回车键时触发 ### Dialog Props @@ -44,7 +45,7 @@ default | String / Slot / Function | - | 对话框内容,同 body。TS 类型 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N dialogClassName | String | - | 弹框元素类名,示例:'t-class-dialog-first t-class-dialog-second' | N dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -draggable | Boolean | false | 对话框是否可以拖拽(仅在非模态对话框时有效) | N +draggable | Boolean | false | 是否可以拖拽(对全屏对话框无效) | N footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 不显示任何内容,值类型为 Function 表示自定义底部内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 string 则直接显示值,值类型为 Function 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N lazy | Boolean | false | 是否启用对话框懒加载,启用时对话框内的内容不渲染 | N @@ -111,8 +112,7 @@ update | `(props: DialogOptions)` | \- | 必需。更新弹框内容 参数名称 | 参数类型 | 参数默认值 | 参数描述 -- | -- | -- | -- options | \- | - | TS 类型:`DialogOptions` - -插件返回值:`DialogInstance` +context | \- | - | 要继承的应用的上下文。TS 类型:`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) ### DialogPlugin.confirm @@ -121,6 +121,7 @@ options | \- | - | TS 类型:`DialogOptions` 参数名称 | 参数类型 | 参数默认值 | 参数描述 -- | -- | -- | -- options | \- | - | TS 类型:`DialogOptions` +context | \- | - | TS 类型:`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) ### DialogPlugin.alert @@ -129,3 +130,4 @@ options | \- | - | TS 类型:`DialogOptions` 参数名称 | 参数类型 | 参数默认值 | 参数描述 -- | -- | -- | -- options | Object | - | TS 类型:`Omit` +context | \- | - | TS 类型:`AppContext`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) diff --git a/packages/products/tdesign-vue/src/dialog/props.ts b/packages/products/tdesign-vue/src/dialog/props.ts index 7d974c9d1..849ef0412 100644 --- a/packages/products/tdesign-vue/src/dialog/props.ts +++ b/packages/products/tdesign-vue/src/dialog/props.ts @@ -61,7 +61,7 @@ export default { dialogStyle: { type: Object as PropType, }, - /** 对话框是否可以拖拽(仅在非模态对话框时有效) */ + /** 是否可以拖拽(对全屏对话框无效) */ draggable: Boolean, /** 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 不显示任何内容,值类型为 Function 表示自定义底部内容 */ footer: { diff --git a/packages/products/tdesign-vue/src/dialog/type.ts b/packages/products/tdesign-vue/src/dialog/type.ts index 142cd3ec1..853e3d54e 100644 --- a/packages/products/tdesign-vue/src/dialog/type.ts +++ b/packages/products/tdesign-vue/src/dialog/type.ts @@ -5,7 +5,7 @@ * */ import { ButtonProps } from '../button'; -import { TNode, Styles, AttachNode } from '../common'; +import { TNode, Styles, AttachNode, AppContext } from '../common'; export interface TdDialogProps { /** @@ -64,7 +64,7 @@ export interface TdDialogProps { */ dialogStyle?: Styles; /** - * 对话框是否可以拖拽(仅在非模态对话框时有效) + * 是否可以拖拽(对全屏对话框无效) * @default false */ draggable?: boolean; @@ -234,6 +234,7 @@ export interface TdDialogCardProps onCancel?: (context: { e: MouseEvent }) => void; /** * 点击右上角关闭按钮时触发 + * @default '' */ onCloseBtnClick?: (context: { e: MouseEvent }) => void; /** @@ -296,8 +297,8 @@ export interface DialogCloseContext { e: MouseEvent | KeyboardEvent; } -export type DialogMethod = (options?: DialogOptions) => DialogInstance; +export type DialogMethod = (options?: DialogOptions, context?: AppContext) => DialogInstance; -export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance; +export type DialogConfirmMethod = (options?: DialogOptions, context?: AppContext) => DialogInstance; -export type DialogAlertMethod = (options?: Omit) => DialogInstance; +export type DialogAlertMethod = (options?: Omit, context?: AppContext) => DialogInstance; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 62b6f55bb..694d36d1e 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -45839,8 +45839,8 @@ ], "field_default_value": "false", "field_enum": "", - "field_desc_zh": "对话框是否可以拖拽(仅在非模态对话框时有效)", - "field_desc_en": null, + "field_desc_zh": "是否可以拖拽(对全屏对话框无效)", + "field_desc_en": "not effective in `full-screen` mode", "field_required": 0, "event_input": "", "create_time": "2020-10-27 10:35:03",