43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
export const useToast = () => {
|
|
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
|
|
const container = document.getElementById('toast-container')
|
|
if (!container) return
|
|
|
|
const toast = document.createElement('div')
|
|
toast.className = `toast ${type === 'success' ? 'toast-success' : 'toast-error'}`
|
|
toast.innerHTML = `
|
|
<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5 ${type === 'success' ? 'text-[#d4b383]' : 'text-red-500'}"></i>
|
|
<span class="text-sm font-medium">${message}</span>
|
|
`
|
|
container.appendChild(toast)
|
|
|
|
// 初始化Lucide图标
|
|
if (window.lucide) {
|
|
window.lucide.createIcons()
|
|
}
|
|
|
|
// 显示动画
|
|
requestAnimationFrame(() => toast.classList.add('show'))
|
|
|
|
// 3秒后自动隐藏
|
|
setTimeout(() => {
|
|
toast.classList.remove('show')
|
|
setTimeout(() => toast.remove(), 400)
|
|
}, 3000)
|
|
}
|
|
|
|
// 便捷方法
|
|
const success = (message: string) => {
|
|
showToast(message, 'success')
|
|
}
|
|
|
|
const error = (message: string) => {
|
|
showToast(message, 'error')
|
|
}
|
|
|
|
return {
|
|
showToast,
|
|
success,
|
|
error
|
|
}
|
|
} |