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) && (
)}