From 2b6a605ee7a25faaac118cf97562320baddfecdd Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 09:36:51 +0800
Subject: [PATCH 01/11] =?UTF-8?q?feat(poup):=20mounted=E5=90=8E=E6=89=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E9=81=BF=E5=85=8Dssr=E4=B8=8Bmismat?=
 =?UTF-8?q?ch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #1518
---
 src/popup/popup.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 078144afc..77fe5ac37 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -1,4 +1,4 @@
-import { computed, watch, defineComponent, h, ref, nextTick, Teleport, Transition } from 'vue';
+import { computed, watch, defineComponent, h, Fragment, ref, nextTick, Teleport, Transition, onMounted } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import popupProps from './props';
@@ -37,6 +37,11 @@ export default defineComponent({
 
     const wrapperVisible = ref(currentVisible.value);
     const innerVisible = ref(currentVisible.value);
+    const mounted = ref(false);
+
+    onMounted(() => {
+      mounted.value = true;
+    });
 
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
@@ -143,11 +148,16 @@ export default defineComponent({
         </Transition>
       );
 
-      const renderPopupContent = (
+      const renderPopupContent = mounted.value ? (
         <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
           {renderOverlayContent}
           {renderContent}
         </Teleport>
+      ) : (
+        <Fragment>
+          {renderOverlayContent}
+          {renderContent}
+        </Fragment>
       );
 
       return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;

From 308ea1b9a44e0ea709adff07e144e5392f9c9b66 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 09:45:59 +0800
Subject: [PATCH 02/11] chore: update snapshot

---
 .../__snapshots__/index.test.jsx.snap         | 597 ------------------
 .../__snapshots__/index.test.jsx.snap         | 167 -----
 2 files changed, 764 deletions(-)
 delete mode 100644 src/calendar/__test__/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/cascader/__test__/__snapshots__/index.test.jsx.snap

diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 4111e78f3..000000000
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,597 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`calendar > props > : format 1`] = `
-<div>
-  <teleport-stub
-    disabled="false"
-    to="[object HTMLBodyElement]"
-  >
-    <div
-      class="t-overlay t-overlay--active"
-      style="z-index: 1000; transition-duration: 300ms;"
-    >
-      <!---->
-    </div>
-    <div
-      class="t-popup t-popup--bottom"
-    >
-      <!--v-if-->
-      
-      <div
-        class="t-calendar t-calendar--popup"
-      >
-        <div
-          class="t-calendar__title"
-        >
-          请选择日期
-        </div>
-        <svg
-          class="t-icon t-icon-close t-calendar__close-btn"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-        <div
-          class="t-calendar__days"
-        >
-          
-          <div
-            class="t-calendar__days-item"
-          >
-            日
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            一
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            二
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            三
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            四
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            五
-          </div>
-          <div
-            class="t-calendar__days-item"
-          >
-            六
-          </div>
-          
-        </div>
-        <div
-          class="t-calendar__months"
-          style="overflow: auto;"
-        >
-          
-          
-          <div
-            class="t-calendar__month"
-          >
-            2022 年 1 月
-          </div>
-          <div
-            class="t-calendar__dates"
-          >
-            
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            <div />
-            
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              1
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              2
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              3
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              4
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              5
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              6
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              7
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              8
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              9
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              10
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              11
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              12
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              13
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              14
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item t-calendar__dates-item--selected"
-            >
-              
-              <!---->
-              15
-              <div
-                class="t-calendar__dates-item-suffix t-calendar__dates-item-suffix--selected"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              16
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              17
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              18
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              19
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              20
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              21
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              22
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              23
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              24
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              25
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              26
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              27
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              28
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              29
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              30
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-            <div
-              class="t-calendar__dates-item"
-            >
-              
-              <!---->
-              31
-              <div
-                class="t-calendar__dates-item-suffix"
-              >
-                ¥60
-              </div>
-              
-            </div>
-            
-            
-          </div>
-          
-          
-        </div>
-        <div
-          class="t-calendar__footer"
-        >
-          <button
-            aria-disabled="false"
-            class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-button--block"
-            role="button"
-            type="button"
-          >
-            <!---->
-            <span
-              class="t-button__content"
-            >
-              确认
-            </span>
-            <!---->
-          </button>
-        </div>
-      </div>
-      
-    </div>
-  </teleport-stub>
-</div>
-`;
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index fc5970ee9..000000000
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,167 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`cascader > events > : pick 1`] = `
-<teleport-stub
-  disabled="false"
-  to="[object HTMLBodyElement]"
->
-  <div
-    class="t-overlay"
-    style="z-index: 1000; transition-duration: 300ms; display: none;"
-  >
-    <!---->
-  </div>
-  <div
-    class="t-popup t-popup--bottom"
-    style="display: none;"
-  >
-    <!--v-if-->
-    
-    <div
-      class="t-cascader"
-    >
-      <div
-        class="t-cascader__title"
-      >
-        标题
-      </div>
-      <div
-        class="t-cascader__close-btn"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-cascader__content"
-      >
-        <div
-          class="t-cascader__steps"
-        >
-          
-          <div
-            class="t-cascader__step"
-          >
-            <div
-              class="t-cascader__step-dot t-cascader__step-dot--last"
-            />
-            <div
-              class="t-cascader__step-label t-cascader__step-label--active"
-            >
-              选择选项
-            </div>
-            <svg
-              class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-          
-        </div>
-        <!---->
-        <div
-          class="t-cascader__options-container"
-          style="width: 200vw; transform: translateX(-000vw);"
-        >
-          
-          <div
-            class="t-cascader__options"
-          >
-            <div
-              class="t-cascader-radio-group-0 slide-enter-from slide-enter-active"
-            >
-              <div
-                class="t-radio-group"
-                role="radiogroup"
-              >
-                
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="110000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      北京市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                <div
-                  class="t-radio t-radio--right t-radio--block"
-                >
-                  <input
-                    class="t-radio__original"
-                    name=""
-                    type="radio"
-                    value="120000"
-                  />
-                  <div
-                    class="t-radio__icon t-radio__icon--right"
-                  >
-                    <div
-                      class="placeholder"
-                    />
-                    <!---->
-                  </div>
-                  <div
-                    class="t-radio__content"
-                  >
-                    <span
-                      class="t-radio__title"
-                      style=""
-                    >
-                      天津市
-                    </span>
-                    <!---->
-                  </div>
-                  <!---->
-                </div>
-                
-                <!---->
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</teleport-stub>
-`;

From 519bd01673e0c874a3944a8c6855ae818908a40d Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 10:07:04 +0800
Subject: [PATCH 03/11] fix(popup): use div not frament

---
 src/calendar/__test__/index.test.jsx | 4 ++--
 src/popup/popup.tsx                  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx
index 53efcb869..ba7dd467c 100644
--- a/src/calendar/__test__/index.test.jsx
+++ b/src/calendar/__test__/index.test.jsx
@@ -69,7 +69,7 @@ describe('calendar', () => {
       const onConfirm = vi.fn((e) => {
         time.value = dayFormat(e, character);
       });
-      const wrapper = mount(
+      const wrapper = await mount(
         <Calendar
           visible={true}
           value={value}
@@ -168,7 +168,7 @@ describe('calendar', () => {
       const onSelect = vi.fn((e) => {
         selectTime.value = dayFormat(e, character);
       });
-      const wrapper = mount(
+      const wrapper = await mount(
         <Calendar
           visible={true}
           value={value}
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 77fe5ac37..ec263e3e9 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -154,10 +154,10 @@ export default defineComponent({
           {renderContent}
         </Teleport>
       ) : (
-        <Fragment>
+        <div>
           {renderOverlayContent}
           {renderContent}
-        </Fragment>
+        </div>
       );
 
       return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;

From bd19ba719c4573ce7f7fd6c16d95fd6b4175be66 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 10:11:19 +0800
Subject: [PATCH 04/11] chore: update snapshot

---
 src/calendar/__test__/index.test.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx
index ba7dd467c..53efcb869 100644
--- a/src/calendar/__test__/index.test.jsx
+++ b/src/calendar/__test__/index.test.jsx
@@ -69,7 +69,7 @@ describe('calendar', () => {
       const onConfirm = vi.fn((e) => {
         time.value = dayFormat(e, character);
       });
-      const wrapper = await mount(
+      const wrapper = mount(
         <Calendar
           visible={true}
           value={value}
@@ -168,7 +168,7 @@ describe('calendar', () => {
       const onSelect = vi.fn((e) => {
         selectTime.value = dayFormat(e, character);
       });
-      const wrapper = await mount(
+      const wrapper = mount(
         <Calendar
           visible={true}
           value={value}

From e397f6dec1cf450a4d1c6bc79c48eddcff3b898c Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 12:17:24 +0800
Subject: [PATCH 05/11] chore: update test case

---
 src/calendar/__test__/index.test.jsx | 10 ++++------
 src/popup/popup.tsx                  | 15 +++++++++------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx
index 53efcb869..9008d8802 100644
--- a/src/calendar/__test__/index.test.jsx
+++ b/src/calendar/__test__/index.test.jsx
@@ -63,12 +63,15 @@ describe('calendar', () => {
 
     it(': type', async () => {
       // type = 'range'
-      const onSelect = vi.fn();
       const time = ref('');
       const character = '-';
       const onConfirm = vi.fn((e) => {
         time.value = dayFormat(e, character);
       });
+      const onSelect = vi.fn((e) => {
+        time.value = dayFormat(e, character);
+      });
+
       const wrapper = mount(
         <Calendar
           visible={true}
@@ -90,10 +93,6 @@ describe('calendar', () => {
       await $dates[selectLastIndex].trigger('click');
       expect(onSelect).toHaveBeenCalledTimes(2);
 
-      // confirm
-      const $button = wrapper.findComponent(Button);
-      await $button.trigger('click');
-
       // TODO：区间选择器时，返回的应该是数组，但测试环境下只有单条 Date 对象数据
       expect(time.value).toEqual([year, month + 1, selectLastIndex + 1].join(character));
       // TODO: && type = 'multiple'
@@ -189,7 +188,6 @@ describe('calendar', () => {
       const $button = wrapper.findComponent(Button);
       await $button.trigger('click');
       expect(onConfirm).toHaveBeenCalledTimes(1);
-      expect(selectTime).toEqual(time);
     });
   });
 });
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index ec263e3e9..46a51e19b 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -148,16 +148,19 @@ export default defineComponent({
         </Transition>
       );
 
-      const renderPopupContent = mounted.value ? (
-        <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
+      const inner = (
+        <>
           {renderOverlayContent}
           {renderContent}
+        </>
+      );
+
+      const renderPopupContent = mounted.value ? (
+        <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
+          {inner}
         </Teleport>
       ) : (
-        <div>
-          {renderOverlayContent}
-          {renderContent}
-        </div>
+        inner
       );
 
       return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;

From 6e534ecb9465a4f8814b3b01a5e809855a28aad5 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 27 Nov 2024 12:25:00 +0800
Subject: [PATCH 06/11] chore: update snapshot

---
 .../__test__/__snapshots__/demo.test.jsx.snap |  48 ++++----
 .../__test__/__snapshots__/demo.test.jsx.snap |  56 ++++-----
 .../__test__/__snapshots__/demo.test.jsx.snap |  16 +--
 .../__test__/__snapshots__/demo.test.jsx.snap |  36 +++---
 .../__test__/__snapshots__/demo.test.jsx.snap | 112 +++++++++---------
 .../__test__/__snapshots__/demo.test.jsx.snap |  32 ++---
 .../__test__/__snapshots__/demo.test.jsx.snap |  24 ++--
 .../__test__/__snapshots__/demo.test.jsx.snap |  36 +++---
 .../__test__/__snapshots__/demo.test.jsx.snap |  16 +--
 9 files changed, 188 insertions(+), 188 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index d35f248bf..64604b523 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`Calendar > Calendar baseVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2563,7 +2563,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -2616,7 +2616,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -5176,7 +5176,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -5230,7 +5230,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -5694,7 +5694,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -5748,7 +5748,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -6789,7 +6789,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -6873,7 +6873,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       >
         <div>
           <div>
-            <!--teleport start-->
+            
             <div
               class="t-overlay"
               style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -9433,7 +9433,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <!--teleport end-->
+            
           </div>
           <div
             class="t-cell t-cell--middle"
@@ -9480,7 +9480,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
-            <!--teleport start-->
+            
             <div
               class="t-overlay"
               style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -12040,7 +12040,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <!--teleport end-->
+            
           </div>
           <div
             class="t-cell t-cell--middle"
@@ -12087,7 +12087,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
-            <!--teleport start-->
+            
             <div
               class="t-overlay"
               style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -14647,7 +14647,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <!--teleport end-->
+            
           </div>
           <div
             class="t-cell t-cell--middle"
@@ -14719,7 +14719,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -15760,7 +15760,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       <div
         class="t-cell t-cell--middle"
@@ -15807,7 +15807,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -18367,7 +18367,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       <div
         class="t-cell t-cell--middle"
@@ -18414,7 +18414,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -18878,7 +18878,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       <div
         class="t-cell t-cell--middle"
@@ -21471,7 +21471,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
 exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -24031,7 +24031,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -24081,7 +24081,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -26641,7 +26641,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index a6598b87b..52e8033e3 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -51,7 +51,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -210,7 +210,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -267,7 +267,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -421,7 +421,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -477,7 +477,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -636,7 +636,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -692,7 +692,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -821,7 +821,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -908,7 +908,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1067,7 +1067,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1136,7 +1136,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1266,7 +1266,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1339,7 +1339,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1498,7 +1498,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1567,7 +1567,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1726,7 +1726,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1795,7 +1795,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1958,7 +1958,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -2027,7 +2027,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2156,7 +2156,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -2226,7 +2226,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2380,7 +2380,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -2439,7 +2439,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2569,7 +2569,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -2625,7 +2625,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2788,7 +2788,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -2844,7 +2844,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3003,7 +3003,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index 13206441d..8c5379695 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -567,7 +567,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
       <div
         data-v-0f72cd9e=""
       >
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3127,7 +3127,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       <div
         class="t-cell t-cell--middle"
@@ -3200,7 +3200,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3701,7 +3701,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
       
@@ -3837,7 +3837,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
   <div
     data-v-0f72cd9e=""
   >
-    <!--teleport start-->
+    
     <div
       class="t-overlay"
       style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -6397,7 +6397,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--teleport end-->
+    
   </div>
   <div
     class="t-cell t-cell--middle"
@@ -6470,7 +6470,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -6971,7 +6971,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
   
 </div>
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 6d26fc759..1c3e07a8e 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -32,7 +32,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -560,7 +560,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -597,7 +597,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1027,7 +1027,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -1064,7 +1064,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2640,7 +2640,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -2708,7 +2708,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3236,7 +3236,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
       <div
@@ -3266,7 +3266,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3573,7 +3573,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
       <div
@@ -3603,7 +3603,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -4267,7 +4267,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -4321,7 +4321,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -4751,7 +4751,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -4791,7 +4791,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -5455,7 +5455,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -5492,7 +5492,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -5799,7 +5799,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 0e46ca6b7..271502ea2 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -94,7 +94,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -114,7 +114,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -183,7 +183,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -209,7 +209,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -269,7 +269,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -289,7 +289,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -345,7 +345,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -365,7 +365,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -427,7 +427,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -454,7 +454,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -572,7 +572,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -594,7 +594,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -712,7 +712,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -739,7 +739,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -849,7 +849,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
     data-v-4a76bf3d=""
@@ -871,7 +871,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -986,7 +986,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -1043,7 +1043,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1103,7 +1103,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -1123,7 +1123,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1179,7 +1179,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -1199,7 +1199,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1261,7 +1261,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1300,7 +1300,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1373,7 +1373,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -1393,7 +1393,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1462,7 +1462,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1502,7 +1502,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1612,7 +1612,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
         data-v-4a76bf3d=""
@@ -1634,7 +1634,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1749,7 +1749,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1789,7 +1789,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1907,7 +1907,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -1929,7 +1929,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2047,7 +2047,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -2090,7 +2090,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2163,7 +2163,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -2183,7 +2183,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2256,7 +2256,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -2276,7 +2276,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2349,7 +2349,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -2369,7 +2369,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2459,7 +2459,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <div
         class="btn-gap"
       />
@@ -2479,7 +2479,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2567,7 +2567,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -2634,7 +2634,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2707,7 +2707,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -2727,7 +2727,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2800,7 +2800,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -2820,7 +2820,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2893,7 +2893,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -2913,7 +2913,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3003,7 +3003,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <div
     class="btn-gap"
   />
@@ -3023,7 +3023,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3111,7 +3111,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index 23eab174f..2b55830c0 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -93,7 +93,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -119,7 +119,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -232,7 +232,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -258,7 +258,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -436,7 +436,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -498,7 +498,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -586,7 +586,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -626,7 +626,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -804,7 +804,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -849,7 +849,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -941,7 +941,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -981,7 +981,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1094,7 +1094,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1184,7 +1184,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1276,7 +1276,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 5662ac740..9c84610e4 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -359,7 +359,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
+          
           <div
             class="t-overlay"
             style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -804,7 +804,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--teleport end-->
+          
           
         </div>
         <!---->
@@ -886,7 +886,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
+          
           <div
             class="t-overlay"
             style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1045,7 +1045,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--teleport end-->
+          
           
         </div>
         <!---->
@@ -2135,7 +2135,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!--teleport start-->
+                
                 <div
                   class="t-overlay"
                   style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2580,7 +2580,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--teleport end-->
+                
                 
               </div>
               <!---->
@@ -2662,7 +2662,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!--teleport start-->
+                
                 <div
                   class="t-overlay"
                   style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2821,7 +2821,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--teleport end-->
+                
                 
               </div>
               <!---->
@@ -3770,7 +3770,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
+          
           <div
             class="t-overlay"
             style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -4215,7 +4215,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--teleport end-->
+          
           
         </div>
         <!---->
@@ -4295,7 +4295,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
+          
           <div
             class="t-overlay"
             style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -4454,7 +4454,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--teleport end-->
+          
           
         </div>
         <!---->
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index e241134a1..1c8c1dfce 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -47,7 +47,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -148,7 +148,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -244,7 +244,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -359,8 +359,8 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
-  <!--teleport start-->
+  
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -535,7 +535,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -601,7 +601,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
       
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -719,7 +719,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
@@ -898,7 +898,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1013,8 +1013,8 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
-      <!--teleport start-->
+      
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1189,7 +1189,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
       <div
@@ -1234,7 +1234,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1335,7 +1335,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
     </div>
@@ -1445,7 +1445,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1539,7 +1539,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--teleport end-->
+      
       
       
       <div
@@ -1683,7 +1683,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1777,7 +1777,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
   
 </div>
 `;
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index 1cce15934..403cd3280 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -116,7 +116,7 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -139,7 +139,7 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     </svg>
     
   </div>
-  <!--teleport end-->
+  
 </div>
 `;
 
@@ -323,7 +323,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -363,7 +363,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       <div
         class="popup-demo"
@@ -385,7 +385,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
-        <!--teleport start-->
+        
         <div
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -408,7 +408,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </svg>
           
         </div>
-        <!--teleport end-->
+        
       </div>
       
     </div>
@@ -438,7 +438,7 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -478,6 +478,6 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     </div>
     
   </div>
-  <!--teleport end-->
+  
 </div>
 `;

From 05524f144e1971ef86ed7d26f46769614f45d8c8 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:41:06 +0800
Subject: [PATCH 07/11] chore: lint

---
 src/calendar/__test__/index.test.jsx | 12 ++++++++----
 src/popup/popup.tsx                  | 21 +++++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx
index 9008d8802..36bf4f7a1 100644
--- a/src/calendar/__test__/index.test.jsx
+++ b/src/calendar/__test__/index.test.jsx
@@ -63,15 +63,13 @@ describe('calendar', () => {
 
     it(': type', async () => {
       // type = 'range'
+      const onSelect = vi.fn();
       const time = ref('');
       const character = '-';
       const onConfirm = vi.fn((e) => {
+        console.log('confirm', e);
         time.value = dayFormat(e, character);
       });
-      const onSelect = vi.fn((e) => {
-        time.value = dayFormat(e, character);
-      });
-
       const wrapper = mount(
         <Calendar
           visible={true}
@@ -93,6 +91,11 @@ describe('calendar', () => {
       await $dates[selectLastIndex].trigger('click');
       expect(onSelect).toHaveBeenCalledTimes(2);
 
+      // confirm
+      const $button = wrapper.findComponent(Button);
+      await $button.trigger('click');
+      console.log('time', time.value);
+
       // TODO：区间选择器时，返回的应该是数组，但测试环境下只有单条 Date 对象数据
       expect(time.value).toEqual([year, month + 1, selectLastIndex + 1].join(character));
       // TODO: && type = 'multiple'
@@ -188,6 +191,7 @@ describe('calendar', () => {
       const $button = wrapper.findComponent(Button);
       await $button.trigger('click');
       expect(onConfirm).toHaveBeenCalledTimes(1);
+      expect(selectTime).toEqual(time);
     });
   });
 });
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index c54ed3f76..aeeefe860 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -1,11 +1,11 @@
-import { computed, watch, defineComponent, h, Fragment, ref, nextTick, Teleport, Transition, onMounted } from 'vue';
+import { computed, watch, defineComponent, h, ref, nextTick, Teleport, Transition, onMounted } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
 import { TdPopupProps } from './type';
-import { useDefault, TNode } from '../shared';
+import { useDefault, TNode, isBrowser } from '../shared';
 import { usePrefixClass } from '../hooks/useClass';
 import { useLockScroll } from '../hooks/useLockScroll';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
@@ -154,14 +154,15 @@ export default defineComponent({
           {renderContent}
         </>
       );
-
-      const renderPopupContent = mounted.value ? (
-        <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
-          {inner}
-        </Teleport>
-      ) : (
-        inner
-      );
+      console.log('mounted.value ', mounted.value);
+      const renderPopupContent =
+        mounted.value || isBrowser ? (
+          <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
+            {inner}
+          </Teleport>
+        ) : (
+          inner
+        );
 
       return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;
     };

From 50323444bd8df4358c45d6b8b9edff0178d9f006 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:41:37 +0800
Subject: [PATCH 08/11] chore: lint

---
 src/calendar/__test__/index.test.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx
index 36bf4f7a1..53efcb869 100644
--- a/src/calendar/__test__/index.test.jsx
+++ b/src/calendar/__test__/index.test.jsx
@@ -67,7 +67,6 @@ describe('calendar', () => {
       const time = ref('');
       const character = '-';
       const onConfirm = vi.fn((e) => {
-        console.log('confirm', e);
         time.value = dayFormat(e, character);
       });
       const wrapper = mount(
@@ -94,7 +93,6 @@ describe('calendar', () => {
       // confirm
       const $button = wrapper.findComponent(Button);
       await $button.trigger('click');
-      console.log('time', time.value);
 
       // TODO：区间选择器时，返回的应该是数组，但测试环境下只有单条 Date 对象数据
       expect(time.value).toEqual([year, month + 1, selectLastIndex + 1].join(character));

From 5da308f7e2b77402e2b4798ca8223408134a6c4e Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:43:36 +0800
Subject: [PATCH 09/11] chore: lint

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 26 +++++++
 .../__test__/__snapshots__/demo.test.jsx.snap | 28 +++++++
 .../__test__/__snapshots__/demo.test.jsx.snap |  8 ++
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 +++++
 .../__test__/__snapshots__/demo.test.jsx.snap | 76 +++++++++++++++++++
 .../__test__/__snapshots__/demo.test.jsx.snap | 16 ++++
 .../__test__/__snapshots__/demo.test.jsx.snap | 12 +++
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 +++++
 .../__test__/__snapshots__/demo.test.jsx.snap |  8 ++
 src/popup/popup.tsx                           |  2 +-
 10 files changed, 211 insertions(+), 1 deletion(-)

diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index 208874664..73228344d 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`Calendar > Calendar baseVue demo works fine 1`] = `
 <div>
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -2565,6 +2566,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -2617,6 +2619,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
 >
   
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -5179,6 +5182,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -5232,6 +5236,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
 >
   
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -5698,6 +5703,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -5751,6 +5757,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
 >
   
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -6794,6 +6801,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -6877,6 +6885,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       >
         <div>
           <div>
+            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -9439,6 +9448,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
+            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -9485,6 +9495,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
+            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -12047,6 +12058,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
+            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -12093,6 +12105,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
+            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -14655,6 +14668,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
+            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -14726,6 +14740,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -15769,6 +15784,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -15815,6 +15831,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -18377,6 +18394,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -18423,6 +18441,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -18889,6 +18908,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -18936,6 +18956,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       <div>
         <div>
           <!--teleport start-->
+          
           <div
             class="t-overlay"
             style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -19472,6 +19493,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             </div>
             
           </div>
+          
           <!--teleport end-->
         </div>
         <div
@@ -22066,6 +22088,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
 exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 <div>
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -24628,6 +24651,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -24677,6 +24701,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
 <div>
   <div>
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -27239,6 +27264,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index 41afde0db..f7e0762ea 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -51,6 +51,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -211,6 +212,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -267,6 +269,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -422,6 +425,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -477,6 +481,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -637,6 +642,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -692,6 +698,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -822,6 +829,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -908,6 +916,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1068,6 +1077,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1136,6 +1146,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1267,6 +1278,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1339,6 +1351,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1499,6 +1512,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1567,6 +1581,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1727,6 +1742,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1795,6 +1811,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1959,6 +1976,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -2027,6 +2045,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2157,6 +2176,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -2226,6 +2246,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2381,6 +2402,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -2439,6 +2461,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2570,6 +2593,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -2625,6 +2649,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2789,6 +2814,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -2844,6 +2870,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -3004,6 +3031,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index f0882b3c9..0d7a2d893 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -565,6 +565,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
       <div
         data-v-0f72cd9e=""
       >
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -3127,6 +3128,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -3199,6 +3201,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3701,6 +3704,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
       
@@ -3836,6 +3840,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
   <div
     data-v-0f72cd9e=""
   >
+    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -6398,6 +6403,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
       
     </div>
     
+    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -6470,6 +6476,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -6972,6 +6979,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
   
 </div>
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index bc12f1767..1bdd1210b 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -32,6 +32,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -568,6 +569,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -604,6 +606,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1035,6 +1038,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -1071,6 +1075,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2648,6 +2653,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -2715,6 +2721,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3251,6 +3258,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
       <div
@@ -3280,6 +3288,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3588,6 +3597,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
       <div
@@ -3617,6 +3627,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -4282,6 +4293,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -4335,6 +4347,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -4766,6 +4779,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -4805,6 +4819,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -5470,6 +5485,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -5506,6 +5522,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -5814,6 +5831,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 2b489965c..b887c3e14 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -21,6 +21,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -95,6 +96,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -114,6 +116,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -183,6 +186,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   <div
     class="btn-gap"
@@ -204,6 +208,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     <!---->
   </button>
   <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -268,6 +273,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   
 </div>
@@ -294,6 +300,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -355,6 +362,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -374,6 +382,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -431,6 +440,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -450,6 +460,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -517,6 +528,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -543,6 +555,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -662,6 +675,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -683,6 +697,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -797,6 +812,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   <div
     class="btn-gap"
@@ -820,6 +836,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </button>
   <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -929,6 +946,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   <div
     class="btn-gap"
@@ -952,6 +970,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </button>
   <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1057,6 +1076,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   <div
     class="btn-gap"
@@ -1080,6 +1100,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </button>
   <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1197,6 +1218,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   <div
     class="btn-gap"
@@ -1220,6 +1242,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </button>
   <!--teleport start-->
+  
   <div
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -1329,6 +1352,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <!--teleport end-->
   
 </div>
@@ -1356,6 +1380,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1467,6 +1492,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-4a76bf3d=""
@@ -1488,6 +1514,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1604,6 +1631,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -1660,6 +1688,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1721,6 +1750,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -1740,6 +1770,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1797,6 +1828,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -1816,6 +1848,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1883,6 +1916,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1921,6 +1955,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1995,6 +2030,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -2014,6 +2050,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2083,6 +2120,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       <div
         class="btn-gap"
@@ -2104,6 +2142,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </button>
       <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2168,6 +2207,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       
       
@@ -2208,6 +2248,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2319,6 +2360,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-4a76bf3d=""
@@ -2340,6 +2382,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2456,6 +2499,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -2495,6 +2539,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2614,6 +2659,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -2635,6 +2681,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2749,6 +2796,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       <div
         class="btn-gap"
@@ -2772,6 +2820,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </button>
       <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -2881,6 +2930,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       <div
         class="btn-gap"
@@ -2904,6 +2954,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </button>
       <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3009,6 +3060,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       <div
         class="btn-gap"
@@ -3032,6 +3084,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </button>
       <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3149,6 +3202,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       <div
         class="btn-gap"
@@ -3172,6 +3226,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </button>
       <!--teleport start-->
+      
       <div
         class="t-overlay"
         style="z-index: 1000; transition-duration: 300ms; display: none;"
@@ -3281,6 +3336,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         
       </div>
+      
       <!--teleport end-->
       
       
@@ -3325,6 +3381,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3399,6 +3456,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3423,6 +3481,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3497,6 +3556,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3521,6 +3581,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3595,6 +3656,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3619,6 +3681,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3710,6 +3773,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3734,6 +3798,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3823,6 +3888,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -3894,6 +3960,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -3968,6 +4035,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -3992,6 +4060,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4066,6 +4135,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4090,6 +4160,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4164,6 +4235,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4188,6 +4260,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4279,6 +4352,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4303,6 +4377,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4392,6 +4467,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index 59f978606..96b058db6 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -5,6 +5,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -94,6 +95,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -119,6 +121,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -233,6 +236,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -258,6 +262,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -437,6 +442,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -498,6 +504,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -587,6 +594,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -626,6 +634,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -805,6 +814,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -849,6 +859,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -942,6 +953,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -981,6 +993,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1095,6 +1108,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1184,6 +1198,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1277,6 +1292,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index e6ce61055..f6657aa88 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -359,6 +359,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
+          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -805,6 +806,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             
           </div>
           
+          <!--teleport end-->
           
         </div>
         <!---->
@@ -886,6 +888,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
+          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -1046,6 +1049,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             
           </div>
           
+          <!--teleport end-->
           
         </div>
         <!---->
@@ -2137,6 +2141,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
+                <!--teleport start-->
                 
                 <div
                   class="t-overlay"
@@ -2583,6 +2588,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   
                 </div>
                 
+                <!--teleport end-->
                 
               </div>
               <!---->
@@ -2664,6 +2670,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
+                <!--teleport start-->
                 
                 <div
                   class="t-overlay"
@@ -2824,6 +2831,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   
                 </div>
                 
+                <!--teleport end-->
                 
               </div>
               <!---->
@@ -3774,6 +3782,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
+          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -4220,6 +4229,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             
           </div>
           
+          <!--teleport end-->
           
         </div>
         <!---->
@@ -4299,6 +4309,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
+          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -4459,6 +4470,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             
           </div>
           
+          <!--teleport end-->
           
         </div>
         <!---->
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index ec1014d3a..397dbf682 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -47,6 +47,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -149,6 +150,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -244,6 +246,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -360,6 +363,8 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -536,6 +541,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -601,6 +607,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
       
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -720,6 +727,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
@@ -898,6 +906,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1014,6 +1023,8 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1190,6 +1201,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
       <div
@@ -1234,6 +1246,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1336,6 +1349,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
     </div>
@@ -1445,6 +1459,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
+      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1540,6 +1555,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
+      <!--teleport end-->
       
       
       <div
@@ -1683,6 +1699,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1778,6 +1795,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index 403cd3280..cc6e21bce 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -116,6 +116,7 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -140,6 +141,7 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
 </div>
 `;
 
@@ -323,6 +325,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -364,6 +367,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       <div
         class="popup-demo"
@@ -385,6 +389,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
+        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -409,6 +414,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           
         </div>
         
+        <!--teleport end-->
       </div>
       
     </div>
@@ -438,6 +444,7 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
+  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -479,5 +486,6 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     
   </div>
   
+  <!--teleport end-->
 </div>
 `;
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index aeeefe860..14c47e32c 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -154,7 +154,7 @@ export default defineComponent({
           {renderContent}
         </>
       );
-      console.log('mounted.value ', mounted.value);
+
       const renderPopupContent =
         mounted.value || isBrowser ? (
           <Teleport to={teleportElement.value} disabled={!teleportElement.value}>

From 4c87617b43feef053edb007fb05f7b46e83f235d Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:51:03 +0800
Subject: [PATCH 10/11] =?UTF-8?q?feat(popup):=20=E6=A0=B9=E6=8D=AEvisible?=
 =?UTF-8?q?=E5=88=A4=E6=96=ADmounted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 26 -------
 .../__test__/__snapshots__/demo.test.jsx.snap | 28 -------
 .../__test__/__snapshots__/demo.test.jsx.snap |  8 --
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 -----
 .../__test__/__snapshots__/demo.test.jsx.snap | 76 -------------------
 .../__test__/__snapshots__/demo.test.jsx.snap | 16 ----
 .../__test__/__snapshots__/demo.test.jsx.snap | 12 ---
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 -----
 .../__test__/__snapshots__/demo.test.jsx.snap |  8 --
 src/popup/popup.tsx                           | 20 ++---
 10 files changed, 8 insertions(+), 222 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index 73228344d..e79eefe52 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -3,7 +3,6 @@
 exports[`Calendar > Calendar baseVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -2566,7 +2565,6 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -2619,7 +2617,6 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -5182,7 +5179,6 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -5236,7 +5232,6 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -5703,7 +5698,6 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -5757,7 +5751,6 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
 >
   
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -6801,7 +6794,6 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -6885,7 +6877,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       >
         <div>
           <div>
-            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -9448,7 +9439,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
-            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -9495,7 +9485,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
-            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -12058,7 +12047,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
-            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -12105,7 +12093,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <div>
           <div>
-            <!--teleport start-->
             
             <div
               class="t-overlay"
@@ -14668,7 +14655,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               
             </div>
             
-            <!--teleport end-->
           </div>
           <div
             class="t-cell"
@@ -14740,7 +14726,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -15784,7 +15769,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -15831,7 +15815,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -18394,7 +18377,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -18441,7 +18423,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       
       <div>
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -18908,7 +18889,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -18955,7 +18935,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
       
       <div>
         <div>
-          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -19494,7 +19473,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             
           </div>
           
-          <!--teleport end-->
         </div>
         <div
           class="t-cell"
@@ -22088,7 +22066,6 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
 exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -24651,7 +24628,6 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -24701,7 +24677,6 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
 exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
 <div>
   <div>
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -27264,7 +27239,6 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index f7e0762ea..41afde0db 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -51,7 +51,6 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -212,7 +211,6 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -269,7 +267,6 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -425,7 +422,6 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -481,7 +477,6 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -642,7 +637,6 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -698,7 +692,6 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -829,7 +822,6 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -916,7 +908,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1077,7 +1068,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1146,7 +1136,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1278,7 +1267,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1351,7 +1339,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1512,7 +1499,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1581,7 +1567,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1742,7 +1727,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1811,7 +1795,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1976,7 +1959,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -2045,7 +2027,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2176,7 +2157,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -2246,7 +2226,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2402,7 +2381,6 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -2461,7 +2439,6 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2593,7 +2570,6 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -2649,7 +2625,6 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2814,7 +2789,6 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -2870,7 +2844,6 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -3031,7 +3004,6 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index 0d7a2d893..f0882b3c9 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -565,7 +565,6 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
       <div
         data-v-0f72cd9e=""
       >
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -3128,7 +3127,6 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       <div
         class="t-cell"
@@ -3201,7 +3199,6 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3704,7 +3701,6 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
       
@@ -3840,7 +3836,6 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
   <div
     data-v-0f72cd9e=""
   >
-    <!--teleport start-->
     
     <div
       class="t-overlay"
@@ -6403,7 +6398,6 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
       
     </div>
     
-    <!--teleport end-->
   </div>
   <div
     class="t-cell"
@@ -6476,7 +6470,6 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -6979,7 +6972,6 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
   
 </div>
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 1bdd1210b..bc12f1767 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -32,7 +32,6 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -569,7 +568,6 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -606,7 +604,6 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1038,7 +1035,6 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -1075,7 +1071,6 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -2653,7 +2648,6 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -2721,7 +2715,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3258,7 +3251,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
       <div
@@ -3288,7 +3280,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3597,7 +3588,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
       <div
@@ -3627,7 +3617,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -4293,7 +4282,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -4347,7 +4335,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <!---->
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -4779,7 +4766,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -4819,7 +4805,6 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -5485,7 +5470,6 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -5522,7 +5506,6 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     </div>
     <!---->
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -5831,7 +5814,6 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index b887c3e14..5763811ad 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -21,7 +21,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -96,7 +95,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -116,7 +114,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -187,7 +184,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -207,7 +203,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -274,7 +269,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -300,7 +294,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -362,7 +355,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -382,7 +374,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -440,7 +431,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -460,7 +450,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -528,7 +517,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -555,7 +543,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -675,7 +662,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -697,7 +683,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -813,7 +798,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -835,7 +819,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -947,7 +930,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -969,7 +951,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1077,7 +1058,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -1099,7 +1079,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1219,7 +1198,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-ddf95d52=""
@@ -1241,7 +1219,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1353,7 +1330,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -1380,7 +1356,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1492,7 +1467,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
     data-v-4a76bf3d=""
@@ -1514,7 +1488,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1631,7 +1604,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -1688,7 +1660,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1750,7 +1721,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -1770,7 +1740,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1828,7 +1797,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -1848,7 +1816,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1916,7 +1883,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1955,7 +1921,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2030,7 +1995,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -2050,7 +2014,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2121,7 +2084,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -2141,7 +2103,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2208,7 +2169,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -2248,7 +2208,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2360,7 +2319,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-4a76bf3d=""
@@ -2382,7 +2340,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2499,7 +2456,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -2539,7 +2495,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2659,7 +2614,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -2681,7 +2635,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2797,7 +2750,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -2819,7 +2771,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -2931,7 +2882,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -2953,7 +2903,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3061,7 +3010,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -3083,7 +3031,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3203,7 +3150,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
         data-v-ddf95d52=""
@@ -3225,7 +3171,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3337,7 +3282,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -3381,7 +3325,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3456,7 +3399,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3481,7 +3423,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3556,7 +3497,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3581,7 +3521,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3656,7 +3595,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3681,7 +3619,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3773,7 +3710,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <div
         class="btn-gap"
       />
@@ -3798,7 +3734,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -3888,7 +3823,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -3960,7 +3894,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4035,7 +3968,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4060,7 +3992,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4135,7 +4066,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4160,7 +4090,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4235,7 +4164,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4260,7 +4188,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4352,7 +4279,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <div
     class="btn-gap"
   />
@@ -4377,7 +4303,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -4467,7 +4392,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index 96b058db6..59f978606 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -5,7 +5,6 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -95,7 +94,6 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -121,7 +119,6 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -236,7 +233,6 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -262,7 +258,6 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -442,7 +437,6 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -504,7 +498,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -594,7 +587,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -634,7 +626,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -814,7 +805,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -859,7 +849,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -953,7 +942,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -993,7 +981,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
     >
       
       
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1108,7 +1095,6 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1198,7 +1184,6 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
   data-v-app=""
 >
   
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1292,7 +1277,6 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index f6657aa88..e6ce61055 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -359,7 +359,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -806,7 +805,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             
           </div>
           
-          <!--teleport end-->
           
         </div>
         <!---->
@@ -888,7 +886,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -1049,7 +1046,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             
           </div>
           
-          <!--teleport end-->
           
         </div>
         <!---->
@@ -2141,7 +2137,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!--teleport start-->
                 
                 <div
                   class="t-overlay"
@@ -2588,7 +2583,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   
                 </div>
                 
-                <!--teleport end-->
                 
               </div>
               <!---->
@@ -2670,7 +2664,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     <!---->
                   </div>
                 </div>
-                <!--teleport start-->
                 
                 <div
                   class="t-overlay"
@@ -2831,7 +2824,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   
                 </div>
                 
-                <!--teleport end-->
                 
               </div>
               <!---->
@@ -3782,7 +3774,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -4229,7 +4220,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             
           </div>
           
-          <!--teleport end-->
           
         </div>
         <!---->
@@ -4309,7 +4299,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               <!---->
             </div>
           </div>
-          <!--teleport start-->
           
           <div
             class="t-overlay"
@@ -4470,7 +4459,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             
           </div>
           
-          <!--teleport end-->
           
         </div>
         <!---->
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 397dbf682..ec1014d3a 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -47,7 +47,6 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -150,7 +149,6 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -246,7 +244,6 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -363,8 +360,6 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -541,7 +536,6 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -607,7 +601,6 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
       
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -727,7 +720,6 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
@@ -906,7 +898,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1023,8 +1014,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1201,7 +1190,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
       <div
@@ -1246,7 +1234,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1349,7 +1336,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
     </div>
@@ -1459,7 +1445,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
           </div>
         </div>
       </div>
-      <!--teleport start-->
       
       <div
         class="t-overlay"
@@ -1555,7 +1540,6 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         
       </div>
       
-      <!--teleport end-->
       
       
       <div
@@ -1699,7 +1683,6 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
       </div>
     </div>
   </div>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -1795,7 +1778,6 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
   
 </div>
 `;
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index cc6e21bce..403cd3280 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -116,7 +116,6 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -141,7 +140,6 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
 </div>
 `;
 
@@ -325,7 +323,6 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -367,7 +364,6 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       <div
         class="popup-demo"
@@ -389,7 +385,6 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </span>
           <!---->
         </button>
-        <!--teleport start-->
         
         <div
           class="t-overlay"
@@ -414,7 +409,6 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           
         </div>
         
-        <!--teleport end-->
       </div>
       
     </div>
@@ -444,7 +438,6 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--teleport start-->
   
   <div
     class="t-overlay"
@@ -486,6 +479,5 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     
   </div>
   
-  <!--teleport end-->
 </div>
 `;
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 14c47e32c..e56cc0e8f 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -39,10 +39,6 @@ export default defineComponent({
     const innerVisible = ref(currentVisible.value);
     const mounted = ref(false);
 
-    onMounted(() => {
-      mounted.value = true;
-    });
-
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
       if (v) {
@@ -112,6 +108,7 @@ export default defineComponent({
           props.onOpen?.();
           setVisible(true);
         }
+        mounted.value = val;
       },
     );
 
@@ -155,14 +152,13 @@ export default defineComponent({
         </>
       );
 
-      const renderPopupContent =
-        mounted.value || isBrowser ? (
-          <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
-            {inner}
-          </Teleport>
-        ) : (
-          inner
-        );
+      const renderPopupContent = mounted.value ? (
+        <Teleport to={teleportElement.value} disabled={!teleportElement.value}>
+          {inner}
+        </Teleport>
+      ) : (
+        inner
+      );
 
       return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;
     };

From 22966717636e24a4f78abaf5257912df8b538a07 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:52:00 +0800
Subject: [PATCH 11/11] chore: lint

---
 src/popup/popup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index e56cc0e8f..04057966a 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -5,7 +5,7 @@ import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
 import { TdPopupProps } from './type';
-import { useDefault, TNode, isBrowser } from '../shared';
+import { useDefault, TNode } from '../shared';
 import { usePrefixClass } from '../hooks/useClass';
 import { useLockScroll } from '../hooks/useLockScroll';
 import { useContent, useTNodeJSX } from '../hooks/tnode';