81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
|
// Toast通知组合式函数
|
|||
|
|
export const useToast = () => {
|
|||
|
|
// 移除toast函数
|
|||
|
|
const removeToast = (toastId: string) => {
|
|||
|
|
const toast = document.getElementById(toastId)
|
|||
|
|
if (toast) {
|
|||
|
|
toast.classList.remove('opacity-100', 'translate-x-0')
|
|||
|
|
toast.classList.add('opacity-0', 'translate-x-full')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.remove()
|
|||
|
|
}, 300)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将函数添加到全局对象（仅在浏览器环境中）
|
|||
|
|
if (typeof window !== 'undefined') {
|
|||
|
|
(window as any).removeToast = removeToast
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showToast = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
|
|||
|
|
// 创建toast容器（如果不存在）
|
|||
|
|
let toastContainer = document.getElementById('toast-container')
|
|||
|
|
if (!toastContainer) {
|
|||
|
|
toastContainer = document.createElement('div')
|
|||
|
|
toastContainer.id = 'toast-container'
|
|||
|
|
toastContainer.className = 'fixed top-4 right-4 z-50 space-y-2'
|
|||
|
|
document.body.appendChild(toastContainer)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建toast元素
|
|||
|
|
const toast = document.createElement('div')
|
|||
|
|
const toastId = `toast-${Date.now()}`
|
|||
|
|
toast.id = toastId
|
|||
|
|
|
|||
|
|
// 根据类型设置样式
|
|||
|
|
const typeClasses = {
|
|||
|
|
success: 'bg-green-100 border-green-500 text-green-700',
|
|||
|
|
error: 'bg-red-100 border-red-500 text-red-700',
|
|||
|
|
warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
|
|||
|
|
info: 'bg-blue-100 border-blue-500 text-blue-700'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const iconMap = {
|
|||
|
|
success: '✓',
|
|||
|
|
error: '✕',
|
|||
|
|
warning: '⚠',
|
|||
|
|
info: 'ℹ'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toast.className = `flex items-center p-4 rounded-lg border-l-4 shadow-md transform transition-all duration-300 ease-in-out ${typeClasses[type]} opacity-0 translate-x-full`
|
|||
|
|
|
|||
|
|
toast.innerHTML = `
|
|||
|
|
<div class="flex-shrink-0 mr-3">
|
|||
|
|
<span class="text-lg font-bold">${iconMap[type]}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<p class="font-medium">${message}</p>
|
|||
|
|
</div>
|
|||
|
|
<button onclick="removeToast('${toastId}')" class="ml-4 text-gray-400 hover:text-gray-600">
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
toastContainer.appendChild(toast)
|
|||
|
|
|
|||
|
|
// 显示动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.classList.remove('opacity-0', 'translate-x-full')
|
|||
|
|
toast.classList.add('opacity-100', 'translate-x-0')
|
|||
|
|
}, 100)
|
|||
|
|
|
|||
|
|
// 自动移除
|
|||
|
|
setTimeout(() => {
|
|||
|
|
removeToast(toastId)
|
|||
|
|
}, 5000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
showToast
|
|||
|
|
}
|
|||
|
|
}
|