From 5f647233363517ec2c4dce3a65ed830bbfa47885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Mon, 14 Apr 2025 16:45:15 +0800 Subject: [PATCH 1/3] feat(Dialog): add `lazy` props --- db/TDesign.db | Bin 1044480 -> 1044480 bytes packages/scripts/api.json | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/db/TDesign.db b/db/TDesign.db index 0119eba28d5901a50ed59eb629df9da2defc5a46..44c1bebb6078417955fb97bd1b48c534352b17f7 100644 GIT binary patch delta 375 zcmZp8VBhe-eu6aP^NBLfjL#brS`!#s6PQ{Pm|GKAS`%1X6WCf4*jp1gS`#>16S!Iv zxLXr=S`&C%6Zp0!@Gq%nR$w`>oxOqIo{5R&z-Gk<6-->5%q&dle@?yUkJ^5!h2P4X zS)5_&boLAUdeaRruq4zsmduNiX5p0N6lE0WZIo@a=HN9pW?*38XYG@ob}e|ZcklZ>JrJp9 z)3?E8pSHC=pVa~+pRU{aWJm9_9h;ubpX{2Km{gyWssJ%x0c3$fPJUuaW?s6ELP16S!Iv zxLXr=S`&C%6Zp0!@Gq%nmS;J&oxOqIo@ukCe!l4?_xMG5LmoFw tD5)$+RdCKoESX-niBEpIz&cKLQSKTBJ)jBls3t7D$S=9Q_ac9>902jqKv4hy diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 0c5668f8f..22e0c2bc3 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -43263,6 +43263,43 @@ "TNode" ] }, + { + "id": 1744620271, + "platform_framework": [ + "1" + ], + "component": "Dialog", + "field_category": 1, + "field_name": "lazy", + "field_type": [ + "4" + ], + "field_default_value": "false", + "field_enum": "", + "field_desc_zh": "是否启用对话框懒加载，启用时对话框内的内容不渲染", + "field_desc_en": "Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable", + "field_required": 0, + "event_input": "", + "create_time": "2025-04-14 08:44:31", + "update_time": "2025-04-14 08:44:31", + "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": "Props", + "platform_framework_text": [ + "Vue(PC)" + ], + "field_type_text": [ + "Boolean" + ] + }, { "id": 1741766727, "platform_framework": [ From 096b4f0ea0809e5555c3d1651cb5d350a33997ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Mon, 14 Apr 2025 16:58:56 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20react=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20lazy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- db/TDesign.db | Bin 1044480 -> 1044480 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 44c1bebb6078417955fb97bd1b48c534352b17f7..9db8c5ac27fa41ec014511e2be79d5c8125ce79e 100644 GIT binary patch delta 98 zcmV-o0G3;1BGA&gZK903EjxX=$s EAMHaT*Z=?k delta 95 zcmV-l0HFVX;6H%iKad*%=aC#k0q22Wg3;1BGA&g Date: Mon, 14 Apr 2025 17:01:03 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dialog/defaultProps.ts | 1 + .../components/dialog/dialog.en-US.md | 1 + .../packages/components/dialog/dialog.md | 1 + .../packages/components/dialog/type.ts | 5 + .../components/dialog/dialog.en-US.md | 20 ++ .../packages/components/dialog/dialog.md | 20 ++ .../packages/components/dialog/props.ts | 2 + .../packages/components/dialog/type.ts | 219 +++++++++++++++++- .../tdesign-vue/src/dialog/dialog.en-US.md | 22 +- .../products/tdesign-vue/src/dialog/dialog.md | 20 ++ .../products/tdesign-vue/src/dialog/props.ts | 2 + .../products/tdesign-vue/src/dialog/type.ts | 59 ++++- packages/scripts/api.json | 6 +- 13 files changed, 372 insertions(+), 6 deletions(-) diff --git a/packages/products/tdesign-react/packages/components/dialog/defaultProps.ts b/packages/products/tdesign-react/packages/components/dialog/defaultProps.ts index c1607a49e..d4fbf368b 100644 --- a/packages/products/tdesign-react/packages/components/dialog/defaultProps.ts +++ b/packages/products/tdesign-react/packages/components/dialog/defaultProps.ts @@ -14,6 +14,7 @@ export const dialogDefaultProps: TdDialogProps = { footer: true, forceRender: false, header: true, + lazy: false, mode: 'modal', placement: 'top', preventScrollThrough: true, 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 b7cb8a850..081686664 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 @@ -34,6 +34,7 @@ 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 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 +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 diff --git a/packages/products/tdesign-react/packages/components/dialog/dialog.md b/packages/products/tdesign-react/packages/components/dialog/dialog.md index 8e04a0351..b578cfc10 100644 --- a/packages/products/tdesign-react/packages/components/dialog/dialog.md +++ b/packages/products/tdesign-react/packages/components/dialog/dialog.md @@ -34,6 +34,7 @@ draggable | Boolean | false | 对话框是否可以拖拽（仅在非模态对 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 +lazy | Boolean | false | 是否启用对话框懒加载，启用时对话框内的内容不渲染 | N mode | String | modal | 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/normal/full-screen | N placement | String | top | 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小。可选项：top/center | N preventScrollThrough | Boolean | true | 防止滚动穿透 | N diff --git a/packages/products/tdesign-react/packages/components/dialog/type.ts b/packages/products/tdesign-react/packages/components/dialog/type.ts index 1e2cee184..b5e7c553d 100644 --- a/packages/products/tdesign-react/packages/components/dialog/type.ts +++ b/packages/products/tdesign-react/packages/components/dialog/type.ts @@ -84,6 +84,11 @@ export interface TdDialogProps { * @default true */ header?: TNode; + /** + * 是否启用对话框懒加载，启用时对话框内的内容不渲染 + * @default false + */ + lazy?: boolean; /** * 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 * @default modal 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 051735911..f04f27ad1 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,7 +6,26 @@ 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 +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 + +### 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 ### Dialog Props @@ -29,6 +48,7 @@ dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescri 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 +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 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 0cf099356..f0c6583c0 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md +++ b/packages/products/tdesign-vue-next/packages/components/dialog/dialog.md @@ -6,7 +6,26 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +body | String / Slot / Function | - | 对话框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts) | N +confirmBtn | String / Object / Slot / Function | true | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +confirmLoading | Boolean | - | 确认按钮加载状态。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | 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 +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 + +### 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 ### Dialog Props @@ -29,6 +48,7 @@ dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styl 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 mode | String | modal | 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/normal/full-screen | N placement | String | top | 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小。可选项：top/center | N preventScrollThrough | Boolean | true | 防止滚动穿透 | N 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 70062fec7..e3385a3ff 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/props.ts +++ b/packages/products/tdesign-vue-next/packages/components/dialog/props.ts @@ -73,6 +73,8 @@ export default { type: [String, Boolean, Function] as PropType, default: true as TdDialogProps['header'], }, + /** 是否启用对话框懒加载，启用时对话框内的内容不渲染 */ + lazy: Boolean, /** 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */ mode: { type: String as PropType, 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 e88b5f3bd..4d2e1f9d8 100644 --- a/packages/products/tdesign-vue-next/packages/components/dialog/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/dialog/type.ts @@ -5,7 +5,171 @@ * */ import { ButtonProps } from '../button'; -import { TNode } from '../common'; +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; + /** + * 点击蒙层时是否触发关闭事件 + */ + 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; + /** + * 是否启用对话框懒加载，启用时对话框内的内容不渲染 + * @default false + */ + lazy?: boolean; + /** + * 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 + * @default modal + */ + mode?: 'modal' | 'modeless' | 'normal' | '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< @@ -72,3 +236,56 @@ export interface TdDialogCardProps */ onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void; } + +export interface DialogOptions extends Omit { + /** + * 对话框挂载的节点。数据类型为 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) => DialogInstance; 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 0e181ae2b..6dce79e42 100644 --- a/packages/products/tdesign-vue/src/dialog/dialog.en-US.md +++ b/packages/products/tdesign-vue/src/dialog/dialog.en-US.md @@ -6,7 +6,26 @@ name | type | default | description | required -- | -- | -- | -- | -- -`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 +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 + +### 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 ### Dialog Props @@ -29,6 +48,7 @@ dialogStyle | Object | - | Styles that apply to the dialog box itself。Typescri 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 +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 diff --git a/packages/products/tdesign-vue/src/dialog/dialog.md b/packages/products/tdesign-vue/src/dialog/dialog.md index 7b2f793f1..690fbec14 100644 --- a/packages/products/tdesign-vue/src/dialog/dialog.md +++ b/packages/products/tdesign-vue/src/dialog/dialog.md @@ -6,7 +6,26 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +body | String / Slot / Function | - | 对话框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +cancelBtn | String / Object / Slot / Function | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +confirmBtn | String / Object / Slot / Function | true | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +confirmLoading | Boolean | - | 确认按钮加载状态。TS 类型：`string \| ButtonProps \| TNode \| null`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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 +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 + +### 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 ### Dialog Props @@ -29,6 +48,7 @@ dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styl 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 mode | String | modal | 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/normal/full-screen | N placement | String | top | 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小。可选项：top/center | N preventScrollThrough | Boolean | true | 防止滚动穿透 | N diff --git a/packages/products/tdesign-vue/src/dialog/props.ts b/packages/products/tdesign-vue/src/dialog/props.ts index ecb309e62..73758ea35 100644 --- a/packages/products/tdesign-vue/src/dialog/props.ts +++ b/packages/products/tdesign-vue/src/dialog/props.ts @@ -73,6 +73,8 @@ export default { type: [String, Boolean, Function] as PropType, default: true, }, + /** 是否启用对话框懒加载，启用时对话框内的内容不渲染 */ + lazy: Boolean, /** 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */ mode: { type: String as PropType, diff --git a/packages/products/tdesign-vue/src/dialog/type.ts b/packages/products/tdesign-vue/src/dialog/type.ts index 4e9ffa469..4d2e1f9d8 100644 --- a/packages/products/tdesign-vue/src/dialog/type.ts +++ b/packages/products/tdesign-vue/src/dialog/type.ts @@ -78,6 +78,11 @@ export interface TdDialogProps { * @default true */ header?: string | boolean | TNode; + /** + * 是否启用对话框懒加载，启用时对话框内的内容不渲染 + * @default false + */ + lazy?: boolean; /** * 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 * @default modal @@ -180,7 +185,57 @@ export interface TdDialogCardProps | 'onCloseBtnClick' | 'onConfirm' | 'confirmLoading' - > {} + > { + /** + * 对话框内容 + */ + body?: string | TNode; + /** + * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 + */ + cancelBtn?: string | ButtonProps | TNode | null; + /** + * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 + * @default true + */ + closeBtn?: string | ButtonProps | TNode | null; + /** + * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 + * @default true + */ + confirmBtn?: string | ButtonProps | TNode | null; + /** + * 确认按钮加载状态 + */ + confirmLoading?: string | ButtonProps | TNode | null; + /** + * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 + * @default true + */ + footer?: boolean | TNode; + /** + * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 + * @default true + */ + header?: string | boolean | TNode; + /** + * 对话框风格 + * @default default + */ + theme?: 'default' | 'info' | 'warning' | 'danger' | 'success'; + /** + * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 + */ + onCancel?: (context: { e: MouseEvent }) => void; + /** + * 点击右上角关闭按钮时触发 + */ + onCloseBtnClick?: (context: { e: MouseEvent }) => void; + /** + * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 + */ + onConfirm?: (context: { e: MouseEvent | KeyboardEvent }) => void; +} export interface DialogOptions extends Omit { /** @@ -233,4 +288,4 @@ export type DialogMethod = (options?: DialogOptions) => DialogInstance; export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance; -export type DialogAlertMethod = (options?: Omit) => DialogInstance; \ No newline at end of file +export type DialogAlertMethod = (options?: Omit) => DialogInstance; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 22e0c2bc3..f0207c69d 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -43266,7 +43266,8 @@ { "id": 1744620271, "platform_framework": [ - "1" + "1", + "2" ], "component": "Dialog", "field_category": 1, @@ -43294,7 +43295,8 @@ "support_default_value": 0, "field_category_text": "Props", "platform_framework_text": [ - "Vue(PC)" + "Vue(PC)", + "React(PC)" ], "field_type_text": [ "Boolean"