feat(Toast): 补充 Toast overlayProps、showOverlay 属性

src/toast/demos/mobile.vue

@@ -21,21 +21,33 @@
     </tdesign-demo-block>
     <tdesign-demo-block title="02 展示位置和展示时间" summary="弹窗展示位置为顶部、中部、底部三种，展示时间可自定义">
       <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showPosition('top')">顶部Top</t-button>
-        <t-button block size="large" variant="outline" @click="showPosition('middle')">中间Middle</t-button>
-        <t-button block size="large" variant="outline" @click="showPosition('bottom')">底部Bottom</t-button>
+        <t-button size="large" variant="outline" @click="showPosition('top')">顶部Top</t-button>
+        <t-button size="large" variant="outline" @click="showPosition('middle')">中间Middle</t-button>
+        <t-button size="large" variant="outline" @click="showPosition('bottom')">底部Bottom</t-button>
+        <t-button size="large" variant="outline" @click="showDuration(5000)">显示 5 秒 </t-button>
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
+    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，可配置 Overlay 属性">
       <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showOverlay">禁止滑动和点击</t-button>
+        <t-button size="large" variant="outline" @click="showOverlay">弹窗显示遮罩</t-button>
+      </div>
+    </tdesign-demo-block>
+
+    <tdesign-demo-block title="04 透传 Overlay" summary="向 Overlay 遮罩透传属性">
+      <div class="toast-demo">
+        <t-button size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block title="05 禁止滑动和点击" summary="弹窗禁止滑动和点击">
+      <div class="toast-demo">
+        <t-button size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
       </div>
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, h, defineComponent } from 'vue';
+import { h, defineComponent } from 'vue';
 import { UserIcon } from 'tdesign-icons-vue-next';
 import Toast from '../index';
 
@@ -108,9 +120,24 @@ export default defineComponent({
     showPosition(placement: TdToastProps['placement']) {
       Toast({ placement, message: '轻提示内容' });
     },
+    showDuration(duration: number) {
+      Toast({ message: `轻提示显示 ${duration}ms`, duration });
+    },
     showOverlay() {
+      Toast({ theme: 'loading', message: '加载中...', showOverlay: true });
+    },
+    showPreventScrollThrough() {
       Toast({ theme: 'loading', message: '加载中...', preventScrollThrough: true });
     },
+    showOverlayProps() {
+      Toast({
+        theme: 'loading',
+        message: '加载中...',
+        showOverlay: true,
+        overlayProps: { transparent: true, visible: true },
+        preventScrollThrough: false,
+      });
+    },
   },
 });
 </script>

src/toast/props.ts

@@ -13,7 +13,8 @@ export default {
     type: String as PropType<TdToastProps['direction']>,
     default: 'row' as TdToastProps['direction'],
     validator(val: TdToastProps['direction']): boolean {
-      return ['row', 'column'].includes(val!);
+      if (!val) return true;
+      return ['row', 'column'].includes(val);
     },
   },
   /** 弹窗显示毫秒数 */
@@ -29,21 +30,30 @@ export default {
   message: {
     type: [String, Function] as PropType<TdToastProps['message']>,
   },
+  /** 遮罩层属性，透传至 Overlay */
+  overlayProps: {
+    type: Object as PropType<TdToastProps['overlayProps']>,
+    default: () => ({}),
+  },
   /** 弹窗展示位置 */
   placement: {
     type: String as PropType<TdToastProps['placement']>,
     default: 'middle' as TdToastProps['placement'],
     validator(val: TdToastProps['placement']): boolean {
-      return ['top', 'middle', 'bottom'].includes(val!);
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
     },
   },
   /** 防止滚动穿透，即不允许点击和滚动 */
   preventScrollThrough: Boolean,
+  /** 是否显示遮罩层 */
+  showOverlay: Boolean,
   /** 提示类型 */
   theme: {
     type: String as PropType<TdToastProps['theme']>,
     validator(val: TdToastProps['theme']): boolean {
-      return ['loading', 'success', 'fail'].includes(val!);
+      if (!val) return true;
+      return ['loading', 'success', 'fail'].includes(val);
     },
   },
 };

src/toast/toast.md

@@ -9,6 +9,8 @@ direction | String | row | 图标排列方式。可选项：row/column | N
 duration | Number | 2000 | 弹窗显示毫秒数 | N
 icon | String / Slot / Function | - | 自定义图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 message | String / Slot / Function | - | 弹窗显示文字。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+overlayProps | Object | {} | 遮罩层属性，透传至 Overlay | N
 placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N
 preventScrollThrough | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N
+showOverlay | Boolean | false | 是否显示遮罩层 | N
 theme | String | - | 提示类型。可选项：loading/success/fail | N

src/toast/toast.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-overlay v-show="preventScrollThrough" />
+    <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,20 +53,22 @@ export default defineComponent({
       },
     ]);
 
-    const cls = `${prefix}-overflow-hidden`;
-    onMounted(() => {
-      props.preventScrollThrough && document.body.classList.add(cls);
-    });
+    const toastOverlayProps = {
+      preventScrollThrough: props.preventScrollThrough,
+      visible: props.showOverlay,
+    };
 
-    onUnmounted(() => {
-      props.preventScrollThrough && document.body.classList.remove(cls);
-    });
+    const customOverlayProps = computed(() => ({
+      ...props.overlayProps,
+      ...toastOverlayProps,
+    }));
 
     return {
       name: ref(name),
       classes,
       iconContent,
       messageContent,
+      customOverlayProps,
       ...toRefs(props),
     };
   },

src/toast/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { TdOverlayProps } from '../overlay/type';
 import { TNode } from '../common';
 
 export interface TdToastProps {
@@ -25,6 +26,11 @@ export interface TdToastProps {
    * 弹窗显示文字
    */
   message?: string | TNode;
+  /**
+   * 遮罩层属性，透传至 Overlay
+   * @default {}
+   */
+  overlayProps?: TdOverlayProps;
   /**
    * 弹窗展示位置
    * @default middle
@@ -35,6 +41,11 @@ export interface TdToastProps {
    * @default false
    */
   preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default false
+   */
+  showOverlay?: boolean;
   /**
    * 提示类型
    */