From 7c14a40b57f2cbd58e58e03e041005fba208936a Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Tue, 25 Oct 2022 10:11:13 +0800
Subject: [PATCH 1/3] docs(Toast): update Toast sample code

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 191 +++++++++++++-----
 src/toast/demos/icon.vue                      |  20 +-
 src/toast/demos/iconText.vue                  |  58 ++++--
 src/toast/demos/mask.vue                      |  43 +++-
 src/toast/demos/mobile.vue                    |  55 +++--
 src/toast/demos/position.vue                  |  36 ++--
 src/toast/demos/text.vue                      |  40 ++--
 7 files changed, 297 insertions(+), 146 deletions(-)

diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index ece3a2918..35f62fb9e 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -14,13 +14,13 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      成功
+      成功-横向
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -28,37 +28,49 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      失败
+      警告-横向
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
-    style="margin-top: 8px;"
   >
     <!---->
     <span
       class="t-button__text"
     >
       
-      加载
+      成功-竖向
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
-    style="margin-top: 8px;"
   >
     <!---->
     <span
       class="t-button__text"
     >
       
-      自定义图标
+      警告-竖向
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      加载
       
     </span>
   </button>
@@ -93,7 +105,7 @@ exports[`Toast > Toast iconVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      失败
+      警告
       
     </span>
   </button>
@@ -136,7 +148,7 @@ exports[`Toast > Toast maskVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -144,7 +156,49 @@ exports[`Toast > Toast maskVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      背景遮罩
+      禁止滑动和点击
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      显示提示
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      关闭提示
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      可滑动和点击透明遮罩
       
     </span>
   </button>
@@ -346,21 +400,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     >
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          顶部Top
-          
-        </span>
-      </button>
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -368,13 +408,13 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          中间Middle
+          顶部展示1秒
           
         </span>
       </button>
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -382,13 +422,13 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          底部Bottom
+          中间展示2秒
           
         </span>
       </button>
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -396,7 +436,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          显示 5 秒 
+          底部展示3秒
           
         </span>
       </button>
@@ -414,7 +454,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      弹窗可显示遮罩，可配置 Overlay 属性
+      弹窗可显示遮罩，禁止滑动和点击
     </p>
     
     <div
@@ -422,7 +462,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     >
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -430,7 +470,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          弹窗显示遮罩
+          禁止滑动和点击
           
         </span>
       </button>
@@ -443,12 +483,12 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      04 透传 Overlay
+      04 手动关闭
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      向 Overlay 遮罩透传属性
+      手动关闭轻提示
     </p>
     
     <div
@@ -456,7 +496,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     >
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -464,7 +504,21 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          可滑动和点击透明遮罩
+          显示提示
+          
+        </span>
+      </button>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          关闭提示
           
         </span>
       </button>
@@ -477,12 +531,12 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      05 禁止滑动和点击
+      05 透传 Overlay
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      弹窗禁止滑动和点击
+      向 Overlay 遮罩透传属性
     </p>
     
     <div
@@ -490,7 +544,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     >
       <button
         aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
         role="button"
       >
         <!---->
@@ -498,7 +552,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          禁止滑动和点击
+          可滑动和点击透明遮罩
           
         </span>
       </button>
@@ -514,7 +568,7 @@ exports[`Toast > Toast positionVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -522,13 +576,13 @@ exports[`Toast > Toast positionVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      顶部Top
+      顶部展示1秒
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -536,22 +590,21 @@ exports[`Toast > Toast positionVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      中间Middle
+      中间展示2秒
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
-    style="margin-top: 8px;"
   >
     <!---->
     <span
       class="t-button__text"
     >
       
-      底部Bottom
+      底部展示3秒
       
     </span>
   </button>
@@ -564,7 +617,7 @@ exports[`Toast > Toast textVue demo works fine 1`] = `
 >
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -572,13 +625,41 @@ exports[`Toast > Toast textVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      文字提示
+      纯文本
       
     </span>
   </button>
   <button
     aria-disabled="false"
-    class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      带图标-横向
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      带图标-竖向
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -586,7 +667,7 @@ exports[`Toast > Toast textVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      文字长提示
+      纯文本最大高度
       
     </span>
   </button>
diff --git a/src/toast/demos/icon.vue b/src/toast/demos/icon.vue
index c10497764..d092c4158 100644
--- a/src/toast/demos/icon.vue
+++ b/src/toast/demos/icon.vue
@@ -1,25 +1,19 @@
 <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" @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>
diff --git a/src/toast/demos/iconText.vue b/src/toast/demos/iconText.vue
index b00eb3f44..dd2aea3c0 100644
--- a/src/toast/demos/iconText.vue
+++ b/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>
+    <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>
diff --git a/src/toast/demos/mask.vue b/src/toast/demos/mask.vue
index 6586fe3da..b01c09cfe 100644
--- a/src/toast/demos/mask.vue
+++ b/src/toast/demos/mask.vue
@@ -1,18 +1,41 @@
 <template>
   <div class="tdesign-demo-block">
-    <t-button theme="primary" @click="onClick()">背景遮罩</t-button>
+    <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
+    <t-button block size="large" variant="outline" @click="showOverlay">显示提示</t-button>
+    <t-button block size="large" variant="outline" @click="hideToast">关闭提示</t-button>
+    <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { h } from 'vue';
 import { Toast } from 'tdesign-mobile-vue';
+import { PoweroffIcon } from 'tdesign-icons-vue-next';
 
-export default defineComponent({
-  setup() {
-    return {
-      onClick: () => Toast({ showOverlay: true, message: '提示内容' }),
-    };
-  },
-});
+const showOverlay = () => {
+  Toast({ message: '未知点击事件' });
+};
+const hideToast = () => {
+  Toast.clear();
+};
+
+const showPreventScrollThrough = () => {
+  Toast({
+    message: '禁止滑动和点击',
+    direction: 'column',
+    placement: 'bottom',
+    duration: 5000,
+    preventScrollThrough: true,
+    icon: () => h(PoweroffIcon),
+  });
+};
+const showOverlayProps = () => {
+  Toast({
+    theme: 'loading',
+    message: '加载中...',
+    showOverlay: true,
+    overlayProps: { transparent: true, visible: true },
+    preventScrollThrough: false,
+  });
+};
 </script>
diff --git a/src/toast/demos/mobile.vue b/src/toast/demos/mobile.vue
index 1af351f8c..4a4e10536 100644
--- a/src/toast/demos/mobile.vue
+++ b/src/toast/demos/mobile.vue
@@ -21,26 +21,32 @@
     </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>
+        <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>
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，可配置 Overlay 属性">
+    <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
       <div class="toast-demo">
-        <t-button size="large" variant="outline" @click="showOverlay">弹窗显示遮罩</t-button>
+        <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
       </div>
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="04 透传 Overlay" summary="向 Overlay 遮罩透传属性">
+    <tdesign-demo-block title="04 手动关闭" summary="手动关闭轻提示">
       <div class="toast-demo">
-        <t-button size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
+        <t-button block size="large" variant="outline" @click="showOverlay">显示提示</t-button>
+        <t-button block size="large" variant="outline" @click="hideToast">关闭提示</t-button>
       </div>
     </tdesign-demo-block>
-    <tdesign-demo-block title="05 禁止滑动和点击" summary="弹窗禁止滑动和点击">
+    <tdesign-demo-block title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
       <div class="toast-demo">
-        <t-button size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
+        <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
       </div>
     </tdesign-demo-block>
   </div>
@@ -48,7 +54,7 @@
 
 <script lang="ts">
 import { h, defineComponent } from 'vue';
-import { UserIcon } from 'tdesign-icons-vue-next';
+import { UserIcon, StarIcon, PoweroffIcon } from 'tdesign-icons-vue-next';
 import Toast from '../index';
 
 import { TdToastProps } from '../type';
@@ -117,17 +123,30 @@ export default defineComponent({
         message,
       });
     },
-    showPosition(placement: TdToastProps['placement']) {
-      Toast({ placement, message: '轻提示内容' });
-    },
-    showDuration(duration: number) {
-      Toast({ message: `轻提示显示 ${duration}ms`, duration });
+    showPositionAndDuration(placement: TdToastProps['placement'], duration: number, message: string) {
+      Toast({
+        placement,
+        message,
+        duration,
+        icon: () => h(StarIcon),
+        direction: 'column',
+      });
     },
     showOverlay() {
-      Toast({ theme: 'loading', message: '加载中...', showOverlay: true });
+      Toast({ message: '未知点击事件' });
+    },
+    hideToast() {
+      Toast.clear();
     },
     showPreventScrollThrough() {
-      Toast({ theme: 'loading', message: '加载中...', preventScrollThrough: true });
+      Toast({
+        message: '禁止滑动和点击',
+        direction: 'column',
+        placement: 'bottom',
+        duration: 5000,
+        preventScrollThrough: true,
+        icon: () => h(PoweroffIcon),
+      });
     },
     showOverlayProps() {
       Toast({
diff --git a/src/toast/demos/position.vue b/src/toast/demos/position.vue
index 1fd8484f5..1d3621588 100644
--- a/src/toast/demos/position.vue
+++ b/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>
+    <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>
diff --git a/src/toast/demos/text.vue b/src/toast/demos/text.vue
index d178ad8fe..617404c7e 100644
--- a/src/toast/demos/text.vue
+++ b/src/toast/demos/text.vue
@@ -1,28 +1,28 @@
 <template>
   <div class="tdesign-demo-block">
-    <t-button theme="primary" @click="useToast('提示内容')">文字提示</t-button>
-    <t-button
-      theme="primary"
-      @click="useThisToast('这是一条长文字提示，超过一定字数就会换行。这是一条长文字提示，超过一定字数就会换行')"
-      >文字长提示</t-button
-    >
+    <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>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { h, ref } from 'vue';
 import { Toast } from 'tdesign-mobile-vue';
+import { UserIcon } from 'tdesign-icons-vue-next';
 
-export default defineComponent({
-  setup() {
-    return {
-      useToast: (text: string) => Toast(text),
-    };
-  },
-  methods: {
-    useThisToast(text: string) {
-      this.$toast(text);
-    },
-  },
-});
+const text1 = ref('轻提示文字内容');
+const text2 = ref('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
+const showText = (message: string) => {
+  Toast(message);
+};
+const showWithIcon = (message: string, direction: any) => {
+  Toast({
+    icon: () => h(UserIcon),
+    direction,
+    duration: 10000,
+    message,
+  });
+};
 </script>

From 52afbdb3887d3820cc3624fc3db60d8daaa080e4 Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Tue, 25 Oct 2022 16:04:10 +0800
Subject: [PATCH 2/3] docs(Toast): update Toast mobile demo

---
 src/toast/__test__/demo.test.jsx         |   4 +
 src/toast/demos/icon.vue                 |   2 +-
 src/toast/demos/iconText.vue             |   2 +-
 src/toast/demos/mask.vue                 |  26 +---
 src/toast/demos/mobile.vue               | 155 ++---------------------
 src/toast/demos/overlay.vue              |  21 +++
 src/toast/demos/position.vue             |   2 +-
 src/toast/demos/preventScrollThrough.vue |  22 ++++
 src/toast/demos/text.vue                 |   2 +-
 9 files changed, 65 insertions(+), 171 deletions(-)
 create mode 100644 src/toast/demos/overlay.vue
 create mode 100644 src/toast/demos/preventScrollThrough.vue

diff --git a/src/toast/__test__/demo.test.jsx b/src/toast/__test__/demo.test.jsx
index 9620d66ec..cd0c1bdc9 100644
--- a/src/toast/__test__/demo.test.jsx
+++ b/src/toast/__test__/demo.test.jsx
@@ -7,7 +7,9 @@ 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 = {
@@ -15,7 +17,9 @@ const mapper = {
   iconTextVue,
   maskVue,
   mobileVue,
+  overlayVue,
   positionVue,
+  preventScrollThroughVue,
   textVue,
 };
 
diff --git a/src/toast/demos/icon.vue b/src/toast/demos/icon.vue
index d092c4158..728e89d82 100644
--- a/src/toast/demos/icon.vue
+++ b/src/toast/demos/icon.vue
@@ -1,5 +1,5 @@
 <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" style="margin-top: 8px" @click="showLoading">加载</t-button>
diff --git a/src/toast/demos/iconText.vue b/src/toast/demos/iconText.vue
index dd2aea3c0..32b0a6147 100644
--- a/src/toast/demos/iconText.vue
+++ b/src/toast/demos/iconText.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-demo-block">
+  <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>
diff --git a/src/toast/demos/mask.vue b/src/toast/demos/mask.vue
index b01c09cfe..88341ff1f 100644
--- a/src/toast/demos/mask.vue
+++ b/src/toast/demos/mask.vue
@@ -1,16 +1,12 @@
 <template>
-  <div class="tdesign-demo-block">
-    <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</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>
-    <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</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 showOverlay = () => {
   Toast({ message: '未知点击事件' });
@@ -18,24 +14,4 @@ const showOverlay = () => {
 const hideToast = () => {
   Toast.clear();
 };
-
-const showPreventScrollThrough = () => {
-  Toast({
-    message: '禁止滑动和点击',
-    direction: 'column',
-    placement: 'bottom',
-    duration: 5000,
-    preventScrollThrough: true,
-    icon: () => h(PoweroffIcon),
-  });
-};
-const showOverlayProps = () => {
-  Toast({
-    theme: 'loading',
-    message: '加载中...',
-    showOverlay: true,
-    overlayProps: { transparent: true, visible: true },
-    preventScrollThrough: false,
-  });
-};
 </script>
diff --git a/src/toast/demos/mobile.vue b/src/toast/demos/mobile.vue
index 4a4e10536..e441f784e 100644
--- a/src/toast/demos/mobile.vue
+++ b/src/toast/demos/mobile.vue
@@ -3,160 +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 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>
+      <positionDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
-      </div>
+      <preventScrollThroughDemo />
     </tdesign-demo-block>
-
     <tdesign-demo-block title="04 手动关闭" summary="手动关闭轻提示">
-      <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>
+      <maskDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
-      </div>
+      <overlayDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { h, defineComponent } from 'vue';
-import { UserIcon, StarIcon, PoweroffIcon } 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,
-      });
-    },
-    showPositionAndDuration(placement: TdToastProps['placement'], duration: number, message: string) {
-      Toast({
-        placement,
-        message,
-        duration,
-        icon: () => h(StarIcon),
-        direction: 'column',
-      });
-    },
-    showOverlay() {
-      Toast({ message: '未知点击事件' });
-    },
-    hideToast() {
-      Toast.clear();
-    },
-    showPreventScrollThrough() {
-      Toast({
-        message: '禁止滑动和点击',
-        direction: 'column',
-        placement: 'bottom',
-        duration: 5000,
-        preventScrollThrough: true,
-        icon: () => h(PoweroffIcon),
-      });
-    },
-    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>
diff --git a/src/toast/demos/overlay.vue b/src/toast/demos/overlay.vue
new file mode 100644
index 000000000..5993f6dc8
--- /dev/null
+++ b/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>
diff --git a/src/toast/demos/position.vue b/src/toast/demos/position.vue
index 1d3621588..46f8712e6 100644
--- a/src/toast/demos/position.vue
+++ b/src/toast/demos/position.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-demo-block">
+  <div class="toast-demo">
     <t-button block size="large" variant="outline" @click="showPositionAndDuration('top', 1000, '顶部-展示1秒')"
       >顶部展示1秒</t-button
     >
diff --git a/src/toast/demos/preventScrollThrough.vue b/src/toast/demos/preventScrollThrough.vue
new file mode 100644
index 000000000..5f6231ba4
--- /dev/null
+++ b/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>
diff --git a/src/toast/demos/text.vue b/src/toast/demos/text.vue
index 617404c7e..2fa72a6d8 100644
--- a/src/toast/demos/text.vue
+++ b/src/toast/demos/text.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-demo-block">
+  <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>

From 188287612ff283d6b09c79645eb4bdada905c36a Mon Sep 17 00:00:00 2001
From: zhongyuan <y243139883@163.com>
Date: Tue, 25 Oct 2022 16:22:07 +0800
Subject: [PATCH 3/3] fix(Toast): update snap

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 112 +++++++++++-------
 1 file changed, 67 insertions(+), 45 deletions(-)

diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index 35f62fb9e..9aad34267 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Toast > Toast iconTextVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block"
+  class="toast-demo"
 >
   <button
     aria-disabled="false"
@@ -79,7 +79,7 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
 
 exports[`Toast > Toast iconVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block"
+  class="toast-demo"
 >
   <button
     aria-disabled="false"
@@ -144,22 +144,8 @@ exports[`Toast > Toast iconVue demo works fine 1`] = `
 
 exports[`Toast > Toast maskVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block"
+  class="toast-demo"
 >
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      禁止滑动和点击
-      
-    </span>
-  </button>
   <button
     aria-disabled="false"
     class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
@@ -188,20 +174,6 @@ exports[`Toast > Toast maskVue demo works fine 1`] = `
       
     </span>
   </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      可滑动和点击透明遮罩
-      
-    </span>
-  </button>
 </div>
 `;
 
@@ -542,29 +514,58 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
     <div
       class="toast-demo"
     >
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        role="button"
+      <div
+        class="toast-demo"
       >
-        <!---->
-        <span
-          class="t-button__text"
+        <button
+          aria-disabled="false"
+          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+          role="button"
         >
-          
-          可滑动和点击透明遮罩
-          
-        </span>
-      </button>
+          <!---->
+          <span
+            class="t-button__text"
+          >
+            
+            可滑动和点击透明遮罩
+            
+          </span>
+        </button>
+      </div>
     </div>
     
   </div>
 </div>
 `;
 
+exports[`Toast > Toast overlayVue demo works fine 1`] = `
+<div
+  class="toast-demo"
+>
+  <div
+    class="toast-demo"
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+      role="button"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        可滑动和点击透明遮罩
+        
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Toast > Toast positionVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block"
+  class="toast-demo"
 >
   <button
     aria-disabled="false"
@@ -611,9 +612,30 @@ exports[`Toast > Toast positionVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Toast > Toast preventScrollThroughVue demo works fine 1`] = `
+<div
+  class="toast-demo"
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      禁止滑动和点击
+      
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Toast > Toast textVue demo works fine 1`] = `
 <div
-  class="tdesign-demo-block"
+  class="toast-demo"
 >
   <button
     aria-disabled="false"