From 9b89c2e39429e232bedca05d4f1de86bf1fb59cd Mon Sep 17 00:00:00 2001 From: engvuchen <1742284391@qq.com> Date: Fri, 11 Jul 2025 11:34:58 +0800 Subject: [PATCH 1/4] docs(dialog): the nested dialogs are supplemented with parameters closed #5625 --- packages/components/dialog/dialog.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/components/dialog/dialog.md b/packages/components/dialog/dialog.md index 3b2bf5eb58..eb75904514 100644 --- a/packages/components/dialog/dialog.md +++ b/packages/components/dialog/dialog.md @@ -70,6 +70,21 @@ 如果您不确定问题是否是由该规则引起的，或者确定该规则不是问题的根本原因，请在 `GitHub` 上提出一个 `issue`，并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。 +### 处理 dialog 嵌套 + +当 dialog 嵌套，退出最外层的 dialog，vue 框架报错： + +``` +Uncaught (in promise) NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. +``` + +需要修改业务配置： + +1. 业务除最后一层 dialog，上层的所有 dialog 都设置 `lazy`； +2. 或者业务除最后一层 dialog，上层的所有 dialog 都设置 `:destroy-on-close="false"`。 + +详情见 [issue](https://github.com/Tencent/tdesign-vue-next/pull/5659)，可通过此[链接](https://stackblitz.com/edit/vitejs-vite-vnywg115?file=src%2FApp.vue)体验。 + ## API ### DialogCard Props From 72117aae1dfb12f5527c6b4e67bbde7ac1c2a03e Mon Sep 17 00:00:00 2001 From: engvuchen <1742284391@qq.com> Date: Fri, 11 Jul 2025 16:35:12 +0800 Subject: [PATCH 2/4] =?UTF-8?q?docs(dialog):=20=E4=BC=98=E5=8C=96=E6=96=87?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/dialog/dialog.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/dialog/dialog.md b/packages/components/dialog/dialog.md index eb75904514..90c3edd2da 100644 --- a/packages/components/dialog/dialog.md +++ b/packages/components/dialog/dialog.md @@ -74,9 +74,7 @@ 当 dialog 嵌套，退出最外层的 dialog，vue 框架报错： -``` -Uncaught (in promise) NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. -``` +> Uncaught (in promise) NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. 需要修改业务配置： From bbe11ade8e004c9ff5d51ea6f305a859af183b73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Wed, 16 Jul 2025 17:47:47 +0800 Subject: [PATCH 3/4] chore: update docs --- packages/components/dialog/dialog.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/components/dialog/dialog.md b/packages/components/dialog/dialog.md index 90c3edd2da..ac8c70e8f1 100644 --- a/packages/components/dialog/dialog.md +++ b/packages/components/dialog/dialog.md @@ -70,16 +70,13 @@ 如果您不确定问题是否是由该规则引起的，或者确定该规则不是问题的根本原因，请在 `GitHub` 上提出一个 `issue`，并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。 -### 处理 dialog 嵌套 +### 多层 Dialog 嵌套时，外层 Dialog 开启 destroy-on-close 后出现异常的情况？ -当 dialog 嵌套，退出最外层的 dialog，vue 框架报错： +使用嵌套多层使用 dialog 且最外层开启了 `destroy-on-close` ，会出现框架层的报错： > Uncaught (in promise) NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. -需要修改业务配置： - -1. 业务除最后一层 dialog，上层的所有 dialog 都设置 `lazy`； -2. 或者业务除最后一层 dialog，上层的所有 dialog 都设置 `:destroy-on-close="false"`。 +解决方法： 除最后一层 dialog，外层的所有 dialog 都设置 `lazy` 为`true`； 详情见 [issue](https://github.com/Tencent/tdesign-vue-next/pull/5659)，可通过此[链接](https://stackblitz.com/edit/vitejs-vite-vnywg115?file=src%2FApp.vue)体验。 From c6c2b8f78705e5cb2cf549479dec78a21d927c88 Mon Sep 17 00:00:00 2001 From: engvuchen <1742284391@qq.com> Date: Mon, 4 Aug 2025 16:27:44 +0800 Subject: [PATCH 4/4] feat(dialog): dialog teleport use selector --- packages/components/dialog/dialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/dialog/dialog.tsx b/packages/components/dialog/dialog.tsx index 660e53d7fd..a9958a3c21 100644 --- a/packages/components/dialog/dialog.tsx +++ b/packages/components/dialog/dialog.tsx @@ -55,7 +55,7 @@ export default defineComponent({ emitCloseEvent({ e: context.e, trigger: 'cancel' }); }; // teleport容器 - const teleportElement = useTeleport(() => props.attach); + // const teleportElement = useTeleport(() => props.attach); useDestroyOnClose(); const timer = ref(); const styleEl = ref(); @@ -294,7 +294,7 @@ export default defineComponent({ ]; return ( - +