fix(Toast): 适配overlay遮罩属性

Tencent · Jul 7, 2022 · 646c2f5 · 646c2f5
1 parent d5f47bd
commit 646c2f5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/src/toast/demos/mobile.vue b/src/toast/demos/mobile.vue
@@ -134,7 +134,7 @@ export default defineComponent({
         theme: 'loading',
         message: '加载中...',
         showOverlay: true,
-        overlayProps: { transparent: true },
+        overlayProps: { transparent: true, visible: true },
         preventScrollThrough: false,
       });
     },

diff --git a/src/toast/toast.vue b/src/toast/toast.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-overlay v-show="showOverlay" v-bind="customOverlayProps" />
+    <t-overlay v-bind="customOverlayProps" />
     <div :class="classes">
       <t-node :content="iconContent"></t-node>
       <div v-if="messageContent" :class="`${name}__text`">
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { LoadingIcon, CheckCircleIcon, ErrorCircleIcon } from 'tdesign-icons-vue-next';
-import { computed, toRefs, ref, defineComponent, getCurrentInstance, h, onMounted, onUnmounted } from 'vue';
+import { computed, toRefs, ref, defineComponent, getCurrentInstance, h } from 'vue';
 import { renderTNode, TNode } from '../shared';
 import TOverlay from '../overlay';
 import ToastProps from './props';
@@ -53,19 +53,15 @@ export default defineComponent({
       },
     ]);
 
-    const preventScrollCls = `${prefix}-overflow-hidden`;
-
-    onMounted(() => {
-      props.preventScrollThrough && document.body.classList.add(preventScrollCls);
-    });
-    onUnmounted(() => {
-      props.preventScrollThrough && document.body.classList.remove(preventScrollCls);
-    });
-
-    const baseOverlayProps = {
-      transparent: false,
+    const toastOverlayProps = {
+      preventScrollThrough: props.preventScrollThrough,
+      visible: props.showOverlay,
     };
-    const customOverlayProps = computed(() => ({ ...baseOverlayProps, ...props.overlayProps }));
+
+    const customOverlayProps = computed(() => ({
+      ...props.overlayProps,
+      ...toastOverlayProps,
+    }));
 
     return {
       name: ref(name),

diff --git a/src/toast/type.ts b/src/toast/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { TdOverlayProps } from '../overlay/type';
 import { TNode } from '../common';
 
 export interface TdToastProps {
@@ -29,7 +30,7 @@ export interface TdToastProps {
    * 遮罩层属性，透传至 Overlay
    * @default {}
    */
-  overlayProps?: object;
+  overlayProps?: TdOverlayProps;
   /**
    * 弹窗展示位置
    * @default middle