feat(toast): toast 支持手动关闭

toast 支持手动关闭 fix Tencent#509
webwyb · Jun 8, 2022 · 817dbca · 817dbca
1 parent 106b209
commit 817dbca
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 3 deletions.
diff --git a/src/toast/README.md b/src/toast/README.md
@@ -127,6 +127,24 @@ Toast({
   duration: 3000,
   icon: 'star',
 });
+```
+### 手动关闭轻提示
+```js
+import { showToast, hideToast } from 'tdesign-miniprogram/toast/index';
+```
+
+```js
+showToast({
+  context: this,
+  selector: '#t-toast',
+  message: '成功文案',
+});
+
+hideToast({
+  context: this,
+  selector: '#t-toast',
+});
+
 ```
 
 ## API

diff --git a/src/toast/_example/toast.ts b/src/toast/_example/toast.ts
@@ -1,4 +1,4 @@
-import Toast from 'tdesign-miniprogram/toast/index';
+import Toast, { hideToast } from 'tdesign-miniprogram/toast/index';
 
 Page({
   data: {
@@ -81,6 +81,17 @@ Page({
         ],
       },
     ],
+    operList4: [
+      {
+        title: '手动关闭轻提示',
+        btns: [
+          {
+            type: 'hideToast',
+            text: '关闭提示',
+          },
+        ],
+      },
+    ],
   },
   handleToast(option) {
     Toast({
@@ -89,6 +100,12 @@ Page({
       ...option,
     });
   },
+  hideToast() {
+    hideToast({
+      context: this,
+      selector: '#t-toast',
+    });
+  },
   clickHandle(e) {
     switch (e.detail) {
       case 'pureText': {
@@ -196,6 +213,10 @@ Page({
         });
         break;
       }
+      case 'hideToast': {
+        this.hideToast();
+        break;
+      }
       default: {
         this.handleToast({
           message: '未知点击事件',

diff --git a/src/toast/_example/toast.wxml b/src/toast/_example/toast.wxml
@@ -4,5 +4,6 @@
   <t-demo title="01 基本用法" desc="" operList="{{operList1}}" bindclickoper="clickHandle" />
   <t-demo title="02 展示位置和展示时间" desc="" operList="{{operList2}}" bindclickoper="clickHandle" />
   <t-demo title="03 显示遮罩" desc="" operList="{{operList3}}" bindclickoper="clickHandle" />
+  <t-demo title="04 手动关闭" desc="" operList="{{operList4}}" bindclickoper="clickHandle" />
 </view>
 <t-toast id="t-toast" />
diff --git a/src/toast/index.ts b/src/toast/index.ts
@@ -30,7 +30,7 @@ const getInstance = (context?: Context, selector = '#t-toast') => {
   return instance;
 };
 
-export default function (options: ToastOptionsType) {
+function Toast(options: ToastOptionsType) {
   const { context, selector, ...Options } = options;
   const instance = getInstance(context, selector);
   if (instance) {
@@ -40,3 +40,17 @@ export default function (options: ToastOptionsType) {
     });
   }
 }
+
+function showToast(options: ToastOptionsType) {
+  Toast(options);
+}
+
+function hideToast(options: ToastOptionsType) {
+  const { context, selector } = options;
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.hide();
+  }
+}
+
+export { Toast as default, showToast, hideToast };
diff --git a/src/toast/toast.ts b/src/toast/toast.ts
@@ -66,7 +66,9 @@ export default class Toast extends SuperComponent {
         this.clear();
       }, duration as any);
     },
-
+    hide() {
+      this.clear();
+    },
     clear() {
       this.setData({ show: false });
       this.removeTimer = setTimeout(() => {