/** * H5版本的Toast提示工具 */ // Toast管理器 const toastManager = { toastElement: null, toastTimer: null, // 显示Toast show(message, duration = 3000, type = 'info') { // 清除之前的Toast this.hide() // 创建Toast元素 this.toastElement = document.createElement('div') this.toastElement.className = `h5-toast h5-toast-${type}` this.toastElement.textContent = message // 添加样式(如果还没有添加) if (!document.getElementById('h5-toast-style')) { const style = document.createElement('style') style.id = 'h5-toast-style' style.textContent = ` .h5-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 6px; font-size: 14px; z-index: 10001; max-width: 80%; text-align: center; opacity: 0; transition: opacity 0.3s ease; } .h5-toast.show { opacity: 1; } .h5-toast-info { background: rgba(0, 0, 0, 0.8); color: white; } .h5-toast-success { background: rgba(40, 167, 69, 0.9); color: white; } .h5-toast-warning { background: rgba(255, 193, 7, 0.9); color: #212529; } .h5-toast-error { background: rgba(220, 53, 69, 0.9); color: white; } ` document.head.appendChild(style) } // 添加到页面 document.body.appendChild(this.toastElement) // 显示动画 setTimeout(() => { this.toastElement.classList.add('show') }, 10) // 自动隐藏 this.toastTimer = setTimeout(() => { this.hide() }, duration) }, // 隐藏Toast hide() { if (this.toastTimer) { clearTimeout(this.toastTimer) this.toastTimer = null } if (this.toastElement) { this.toastElement.classList.remove('show') setTimeout(() => { if (this.toastElement && this.toastElement.parentNode) { document.body.removeChild(this.toastElement) } this.toastElement = null }, 300) } } } // 全局Toast函数 function showToastEffect(message, duration = 3000, type = 'info') { toastManager.show(message, duration, type) } // 导出到全局 window.showToastEffect = showToastEffect window.toastManager = toastManager console.log('✅ H5 Toast工具已加载')