d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 23:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

通知组件

Browse Source
This commit is contained in:
tangly1024.com
2024-05-31 15:13:11 +08:00
parent 790ae39930
commit 85fa2fb978
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Notification.js
View File

@@ -1,5 +1,9 @@
import { useState } from 'react' import { useState } from 'react'
/**
* 弹框通知
* @returns
*/
const useNotification = () => { const useNotification = () => {
const [message, setMessage] = useState('') const [message, setMessage] = useState('')
const [isVisible, setIsVisible] = useState(false) const [isVisible, setIsVisible] = useState(false)
@@ -8,12 +12,13 @@ const useNotification = () => {
setMessage(msg) setMessage(msg)
setIsVisible(true) setIsVisible(true)
setTimeout(() => { setTimeout(() => {
setIsVisible(false) closeNotification()
}, 3000) }, 3000)
} }
const closeNotification = () => { const closeNotification = () => {
setIsVisible(false) setIsVisible(false)
setMessage('')
} }
// 测试通知效果 // 测试通知效果
@@ -33,11 +38,10 @@ const useNotification = () => {
*/ */
const Notification = () => { const Notification = () => {
return ( return (
<div <div className={`notification fixed left-0 w-full px-2 z-20 bottom-14`}>
className={`notification fixed left-0 w-full px-2 z-50 transform transition-all duration-300 ${ <div
isVisible ? 'bottom-20 animate__animated animate__fadeIn' : '' className={` ${isVisible && message ? 'opacity-100 ' : 'invisible opacity-0 bottom-0'} transition-opacity duration-200
} `}> max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg`}>
<div className='max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg'>
{message} {message}
<button <button
onClick={closeNotification} onClick={closeNotification}