Merge pull request #65 from Tencent/fix/popup_teleport

fix(popup): 修复teleport失效问题 #64
Tencent · Apr 8, 2022 · 3cf7741 · 3cf7741
2 parents 318e641 + 49a6c60
commit 3cf7741
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 533 deletions.
diff --git a/src/popup/demos/mobile.vue b/src/popup/demos/mobile.vue
@@ -29,7 +29,7 @@
     <div style="height: 200px; background: #fff"></div>
   </t-popup>
 
-  <t-popup v-model="center" placement="center">
+  <t-popup v-model="center" placement="center" to="body">
     <div style="width: 200px; height: 200px; background: #fff"></div>
   </t-popup>
 

diff --git a/src/popup/popup.md b/src/popup/popup.md
@@ -8,8 +8,7 @@
 lockScroll | Boolean | true | 是否锁定内容滚动 | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
-teleportDisabled | Boolean | false | 是否禁用teleport | N
-to | String | body | 透传给teleport组件的to属性 | N
+to | String | - | 透传给teleport组件的to属性 | N
 transitionName | String | - | 弹出层内容区的动画名，等价于transition组件的name属性 | N
 visible | Boolean | false | 是否显示浮层。支持语法糖 `v-model` 或 `v-model:visible`。TS 类型：`boolean` | N
 defaultVisible | Boolean | false | 是否显示浮层。非受控属性。TS 类型：`boolean` | N

diff --git a/src/popup/popup.vue b/src/popup/popup.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :to="to" :disabled="teleportDisabled">
+  <teleport :to="to" :disabled="!to">
     <div :class="[rootClasses, $attrs.class]" :style="rootStyles" @touchmove="handleMove">
       <transition name="fade">
         <t-mask v-show="currentVisible" :transparent="!showOverlay" @click="handleMaskClick" />

diff --git a/src/popup/props.ts b/src/popup/props.ts
@@ -26,13 +26,8 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 是否禁用teleport */
-  teleportDisabled: Boolean,
   /** 透传给teleport组件的to属性 */
-  to: {
-    type: String,
-    default: 'body',
-  },
+  to: String,
   /** 弹出层内容区的动画名，等价于transition组件的name属性 */
   transitionName: {
     type: String,
@@ -41,16 +36,16 @@ export default {
   /** 是否显示浮层 */
   visible: {
    type: Boolean,
-   default: undefined 
+   default: undefined
   },
   modelValue: {
    type: Boolean,
-   default: undefined 
+   default: undefined
   },
   /** 是否显示浮层，非受控属性 */
   defaultVisible: {
    type: Boolean,
-   default: undefined 
+   default: undefined
   },
   /** 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */
   zIndex: {