Skip to content

feat(Dialog): implemented lazy #3581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

feat(Dialog): implemented lazy #3581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
865087f
feat(Dialog): implemented lazy
RSS1102 Apr 24, 2025
e00f56f
fix: 显示判断错误和非模态状态框初始化时获取元素失败错误
RSS1102 Apr 25, 2025
8dca92f
chore: 修改变量命名
RSS1102 Apr 25, 2025
59e126f
chore(drawer): rename isFirstAlreadyRender to isMounted for clarity
RSS1102 May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/dialog/dialog.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ dialogStyle | Object | - | Styles that apply to the dialog box itself. Typescrip
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
Expand Down
1 change: 1 addition & 0 deletions src/dialog/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,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
Expand Down
13 changes: 10 additions & 3 deletions src/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default mixins(
styleEl: null,
timer: null,
animationEnd: false,
isMounted: false,
};
},

Expand Down Expand Up @@ -155,14 +156,20 @@ export default mixins(
computedAttach(): AttachNode {
return this.showInAttachedElement || this.isNormal ? undefined : this.attach || this.globalAttach();
},
shouldRender(): boolean {
const shouldDestroy = this.destroyOnClose && !this.visible && this.animationEnd;
const avoidRender = !this.lazy || this.isMounted;
return shouldDestroy || avoidRender;
},
},

watch: {
visible: {
handler(value) {
if (typeof window === 'undefined') return;
if (value) {
this.animationEnd = false;
this.isMounted = true;

if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
if (this.preventScrollThrough) {
this.$nextTick(() => {
Expand Down Expand Up @@ -411,7 +418,7 @@ export default mixins(
},
initDragEvent(status: boolean) {
const target = this.$refs.dialog as HTMLElement;
if (status) {
if (status && target) {
target.addEventListener('mousedown', this.mousedownHandler);
} else {
target.removeEventListener('mousedown', this.mousedownHandler);
Expand Down Expand Up @@ -518,7 +525,7 @@ export default mixins(
const view = [maskView, dialogView];
const ctxStyle = { zIndex: this.zIndex };

if (this.destroyOnClose && !this.visible && this.animationEnd) return null;
if (!this.shouldRender) return null;

return (
<transition
Expand Down
2 changes: 2 additions & 0 deletions src/dialog/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export default {
type: [String, Boolean, Function] as PropType<TdDialogProps['header']>,
default: true,
},
/** 是否启用对话框懒加载，启用时对话框内的内容不渲染 */
lazy: Boolean,
/** 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */
mode: {
type: String as PropType<TdDialogProps['mode']>,
Expand Down
5 changes: 5 additions & 0 deletions src/dialog/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export interface TdDialogProps {
* @default true
*/
header?: string | boolean | TNode;
/**
* 是否启用对话框懒加载，启用时对话框内的内容不渲染
* @default false
*/
lazy?: boolean;
/**
* 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
* @default modal
Expand Down