diff --git a/packages/vantui/src/toast/demo/demo2.tsx b/packages/vantui/src/toast/demo/demo2.tsx index dd1ede3a..39b511f9 100644 --- a/packages/vantui/src/toast/demo/demo2.tsx +++ b/packages/vantui/src/toast/demo/demo2.tsx @@ -5,14 +5,8 @@ const Toast_ = Toast.createOnlyToast() export default function Demo() { const show = () => { - Toast_.success({ - message: '成功文案', - }) - } - - const showLong = () => { - Toast_.fail({ - message: '失败文案', + Toast_.loading({ + message: '加载中...', }) } @@ -21,9 +15,6 @@ export default function Demo() { - ) diff --git a/packages/vantui/src/toast/demo/demo3.tsx b/packages/vantui/src/toast/demo/demo3.tsx index 282388ce..0dc55800 100644 --- a/packages/vantui/src/toast/demo/demo3.tsx +++ b/packages/vantui/src/toast/demo/demo3.tsx @@ -11,7 +11,7 @@ export default function Demo() { } const showLong = () => { - Toast.loading({ + Toast.fail({ message: '失败文案', selector: '#vanToast-demo2', mask: true, diff --git a/packages/vantui/src/toast/toast.tsx b/packages/vantui/src/toast/toast.tsx index 5fd2c407..2988fa7c 100644 --- a/packages/vantui/src/toast/toast.tsx +++ b/packages/vantui/src/toast/toast.tsx @@ -1,5 +1,5 @@ import { View, Text, RichText } from '@tarojs/components' -import { useState } from 'react' +import { useState, useEffect } from 'react' import { ToastProps } from '../../types/toast' import VanTransition from '../transition/index' import VanOverlay from '../overlay/index' @@ -24,6 +24,21 @@ export function Toast(props: ToastProps) { id: '', ...props, }) + const [visible, setVisible] = useState(state.show) + + useEffect(() => { + let timer: any = null + + if (state.duration !== 0) { + timer = setTimeout(() => { + setVisible(false) + }, state.duration) + } + + return () => { + clearTimeout(timer) + } + }, [state.duration]) const noop = function () {} @@ -31,13 +46,13 @@ export function Toast(props: ToastProps) { {(state.mask || state.forbidClick) && ( )}