docs(Toast): update Toast sample code

src/toast/__test__/demo.test.jsx

@@ -7,15 +7,19 @@ import iconVue from '@/toast/demos/icon.vue';
 import iconTextVue from '@/toast/demos/iconText.vue';
 import maskVue from '@/toast/demos/mask.vue';
 import mobileVue from '@/toast/demos/mobile.vue';
+import overlayVue from '@/toast/demos/overlay.vue';
 import positionVue from '@/toast/demos/position.vue';
+import preventScrollThroughVue from '@/toast/demos/preventScrollThrough.vue';
 import textVue from '@/toast/demos/text.vue';
 
 const mapper = {
   iconVue,
   iconTextVue,
   maskVue,
   mobileVue,
+  overlayVue,
   positionVue,
+  preventScrollThroughVue,
   textVue,
 };
 

src/toast/demos/icon.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="tdesign-demo-block">
+  <div class="toast-demo">
     <t-button theme="primary" @click="showSuccess">成功</t-button>
-    <t-button theme="primary" @click="showFail">失败</t-button>
+    <t-button theme="primary" @click="showFail">警告</t-button>
     <t-button theme="primary" style="margin-top: 8px" @click="showLoading">加载</t-button>
     <t-button theme="primary" style="margin-top: 8px" @click="showCustom">自定义图标</t-button>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue';
+<script setup lang="ts">
+import { h } from 'vue';
 import { UserIcon } from 'tdesign-icons-vue-next';
 import { Toast } from 'tdesign-mobile-vue';
 
-export default defineComponent({
-  setup() {
-    return {
-      showSuccess: () => Toast.success(),
-      showFail: () => Toast.fail(),
-      showLoading: () => Toast.loading(),
-      showCustom: () => Toast({ icon: () => h(UserIcon) }),
-    };
-  },
-});
+const showSuccess = () => Toast.success();
+const showFail = () => Toast.fail();
+const showLoading = () => Toast.loading();
+const showCustom = () => Toast({ icon: () => h(UserIcon) });
 </script>

src/toast/demos/iconText.vue

@@ -1,25 +1,49 @@
 <template>
-  <div class="tdesign-demo-block">
-    <t-button theme="primary" @click="showSuccess">成功</t-button>
-    <t-button theme="primary" @click="showFail">失败</t-button>
-    <t-button theme="primary" style="margin-top: 8px" @click="showLoading">加载</t-button>
-    <t-button theme="primary" style="margin-top: 8px" @click="showCustom">自定义图标</t-button>
+  <div class="toast-demo">
+    <t-button block size="large" variant="outline" @click="showSuccessRow('成功文案')">成功-横向</t-button>
+    <t-button block size="large" variant="outline" @click="showFailRow('失败文案')">警告-横向</t-button>
+    <t-button block size="large" variant="outline" @click="showSuccess('成功文案')">成功-竖向</t-button>
+    <t-button block size="large" variant="outline" @click="showFail('失败文案')">警告-竖向</t-button>
+    <t-button block size="large" variant="outline" @click="showLoading('加载中...')">加载</t-button>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-import { UserIcon } from 'tdesign-icons-vue-next';
+<script setup lang="ts">
 import { Toast } from 'tdesign-mobile-vue';
 
-export default defineComponent({
-  setup() {
-    return {
-      showSuccess: () => Toast.success('成功'),
-      showFail: () => Toast.fail('失败'),
-      showLoading: () => Toast.loading('加载'),
-      showCustom: () => Toast({ icon: () => h(UserIcon), message: '自定义图标' }),
-    };
-  },
-});
+const showSuccess = (message?: string) => {
+  Toast({
+    theme: 'success',
+    direction: 'column',
+    message,
+  });
+};
+const showFail = (message: string) => {
+  Toast({
+    theme: 'fail',
+    direction: 'column',
+    message,
+  });
+};
+const showSuccessRow = (message: string) => {
+  Toast({
+    theme: 'success',
+    direction: 'row',
+    message,
+  });
+};
+const showFailRow = (message: string) => {
+  Toast({
+    theme: 'fail',
+    direction: 'row',
+    message,
+  });
+};
+
+const showLoading = (message: string) => {
+  Toast({
+    theme: 'loading',
+    message,
+  });
+};
 </script>

src/toast/demos/mask.vue

@@ -1,18 +1,17 @@
 <template>
-  <div class="tdesign-demo-block">
-    <t-button theme="primary" @click="onClick()">背景遮罩</t-button>
+  <div class="toast-demo">
+    <t-button block size="large" variant="outline" @click="showOverlay">显示提示</t-button>
+    <t-button block size="large" variant="outline" @click="hideToast">关闭提示</t-button>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { Toast } from 'tdesign-mobile-vue';
 
-export default defineComponent({
-  setup() {
-    return {
-      onClick: () => Toast({ showOverlay: true, message: '提示内容' }),
-    };
-  },
-});
+const showOverlay = () => {
+  Toast({ message: '未知点击事件' });
+};
+const hideToast = () => {
+  Toast.clear();
+};
 </script>

src/toast/demos/mobile.vue

@@ -3,141 +3,31 @@
     <h1 class="title">Toast 轻提示</h1>
     <p class="summary">一种轻量级反馈或提示，不会打断用户操作。</p>
     <tdesign-demo-block title="01 类型" summary="基础提示">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showText(text1)">纯文本</t-button>
-        <t-button block size="large" variant="outline" @click="showWithIcon(text1, 'row')">带图标-横向</t-button>
-        <t-button block size="large" variant="outline" @click="showWithIcon(text1, 'column')">带图标-竖向</t-button>
-        <t-button block size="large" variant="outline" @click="showText(text2)">纯文本最大高度</t-button>
-      </div>
+      <textDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="默认提示">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showSuccessRow(success)">成功-横向</t-button>
-        <t-button block size="large" variant="outline" @click="showFailRow(fail)">警告-横向</t-button>
-        <t-button block size="large" variant="outline" @click="showSuccess(success)">成功-竖向</t-button>
-        <t-button block size="large" variant="outline" @click="showFail(fail)">警告-竖向</t-button>
-        <t-button block size="large" variant="outline" @click="showLoading('加载中...')">加载</t-button>
-      </div>
+      <iconTextDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 展示位置和展示时间" summary="弹窗展示位置为顶部、中部、底部三种，展示时间可自定义">
-      <div class="toast-demo">
-        <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>
+      <positionDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，可配置 Overlay 属性">
-      <div class="toast-demo">
-        <t-button size="large" variant="outline" @click="showOverlay">弹窗显示遮罩</t-button>
-      </div>
+    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
+      <preventScrollThroughDemo />
     </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 title="04 手动关闭" summary="手动关闭轻提示">
+      <maskDemo />
     </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 title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
+      <overlayDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { h, defineComponent } from 'vue';
-import { UserIcon } from 'tdesign-icons-vue-next';
-import Toast from '../index';
-
-import { TdToastProps } from '../type';
-
-export default defineComponent({
-  setup() {},
-  data() {
-    return {
-      text1: '轻提示文字内容',
-      text2: '最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字',
-      success: '成功文案',
-      fail: '失败文案',
-      loading: '加载',
-      custom: '自定义图标',
-    };
-  },
-  methods: {
-    showText(message: string) {
-      Toast(message);
-    },
-    showSuccess(message?: string) {
-      Toast({
-        theme: 'success',
-        direction: 'column',
-        message,
-      });
-    },
-    showFail(message: string) {
-      Toast({
-        theme: 'fail',
-        direction: 'column',
-        message,
-      });
-    },
-    showSuccessRow(message: string) {
-      Toast({
-        theme: 'success',
-        direction: 'row',
-        message,
-      });
-    },
-    showFailRow(message: string) {
-      Toast({
-        theme: 'fail',
-        direction: 'row',
-        message,
-      });
-    },
-    showWithIcon(message: string, direction: any) {
-      Toast({
-        icon: () => h(UserIcon),
-        direction,
-        duration: 10000,
-        message,
-      });
-    },
-    showCustom(message?: string) {
-      Toast({
-        icon: () => h(UserIcon),
-        message,
-      });
-    },
-    showLoading(message: string) {
-      Toast({
-        theme: 'loading',
-        message,
-      });
-    },
-    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 lang="ts" setup>
+import textDemo from './text.vue';
+import iconTextDemo from './iconText.vue';
+import positionDemo from './position.vue';
+import maskDemo from './mask.vue';
+import preventScrollThroughDemo from './preventScrollThrough.vue';
+import overlayDemo from './overlay.vue';
 </script>

src/toast/demos/overlay.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="toast-demo">
+    <div class="toast-demo">
+      <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from 'tdesign-mobile-vue';
+
+const showOverlayProps = () => {
+  Toast({
+    theme: 'loading',
+    message: '加载中...',
+    showOverlay: true,
+    overlayProps: { transparent: true, visible: true },
+    preventScrollThrough: false,
+  });
+};
+</script>

src/toast/demos/position.vue

@@ -1,21 +1,31 @@
 <template>
-  <div class="tdesign-demo-block">
-    <t-button theme="primary" @click="onClick('top')">顶部Top</t-button>
-    <t-button theme="primary" @click="onClick('middle')">中间Middle</t-button>
-    <t-button theme="primary" style="margin-top: 8px" @click="onClick('bottom')">底部Bottom</t-button>
+  <div class="toast-demo">
+    <t-button block size="large" variant="outline" @click="showPositionAndDuration('top', 1000, '顶部-展示1秒')"
+      >顶部展示1秒</t-button
+    >
+    <t-button block size="large" variant="outline" @click="showPositionAndDuration('middle', 2000, '中间-展示2秒')"
+      >中间展示2秒</t-button
+    >
+    <t-button block size="large" variant="outline" @click="showPositionAndDuration('bottom', 3000, '底部-展示3秒')"
+      >底部展示3秒</t-button
+    >
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-import { CheckIcon } from 'tdesign-icons-vue-next';
+<script setup lang="ts">
+import { h } from 'vue';
 import { Toast } from 'tdesign-mobile-vue';
+import { StarIcon } from 'tdesign-icons-vue-next';
 
-export default defineComponent({
-  setup() {
-    return {
-      onClick: (position: any) => Toast({ position, icon: () => h(CheckIcon) }),
-    };
-  },
-});
+type Placement = 'top' | 'middle' | 'bottom';
+
+const showPositionAndDuration = (placement: Placement, duration: number, message: string) => {
+  Toast({
+    placement,
+    message,
+    duration,
+    icon: () => h(StarIcon),
+    direction: 'column',
+  });
+};
 </script>

src/toast/demos/preventScrollThrough.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h } from 'vue';
+import { Toast } from 'tdesign-mobile-vue';
+import { PoweroffIcon } from 'tdesign-icons-vue-next';
+
+const showPreventScrollThrough = () => {
+  Toast({
+    message: '禁止滑动和点击',
+    direction: 'column',
+    placement: 'bottom',
+    duration: 5000,
+    preventScrollThrough: true,
+    icon: () => h(PoweroffIcon),
+  });
+};
+</script>