/** * toast 弹窗组件 * 支持 success/error/warning/info 四种状态 * 可配置 duration, position 等参数 */ type ToastType = 'success' | 'error' | 'warning' | 'info' interface ToastOptions { type?: ToastType duration?: number position?: 'top' | 'middle' | 'bottom' icon?: 'success' | 'error' | 'none' | 'loading' | 'fail' | 'exception' message: string } export function showToast(options: ToastOptions | string) { const defaultOptions: ToastOptions = { type: 'info', duration: 2000, position: 'middle', message: '', } const mergedOptions = typeof options === 'string' ? { ...defaultOptions, message: options } : { ...defaultOptions, ...options } // #ifdef APP-PLUS // 关闭上一次的提示 plus.nativeUI.closeToast() // 使用 plus.nativeUI.toast 实现 // 映射 position 到 plus.nativeUI.toast 支持的格式 const positionMap: Record = { top: { vertical: 'top', horizontal: 'center' }, middle: { vertical: 'center', horizontal: 'center' }, bottom: { vertical: 'bottom', horizontal: 'center' }, } // 映射图标类型 const plusIconMap: Record< ToastType, 'success' | 'error' | 'none' | 'loading' | 'fail' | 'exception' > = { success: 'success', error: 'error', warning: 'fail', info: 'none', } // 安卓平台添加适当偏移,iOS保持默认 const platform = plus.os.name const verticalOffset = platform === 'Android' ? '50%' : 'center' // 构造 ToastStyles 配置项 const toastOptions: any = { duration: mergedOptions.duration >= 3000 ? 'long' : 'short', ...positionMap[mergedOptions.position], align: 'center', // 文字居中对齐 verticalAlign: verticalOffset, // 垂直位置补偿 background: 'rgba(0,0,0,0.7)', type: 'richtext', } // 如果有图标配置,则添加图标 if (mergedOptions.icon || plusIconMap[mergedOptions.type]) { toastOptions.icon = mergedOptions.icon || plusIconMap[mergedOptions.type] } plus.nativeUI.toast(`${mergedOptions.message}`, toastOptions) return // #endif // #ifndef APP-PLUS // 映射position到uniapp支持的格式 const uniPositionMap: Record = { top: 'top', middle: 'center', bottom: 'bottom', } // 映射图标类型 const uniIconMap: Record< ToastType, 'success' | 'error' | 'none' | 'loading' | 'fail' | 'exception' > = { success: 'success', error: 'error', warning: 'fail', info: 'none', } // 调用uni.showToast显示提示 uni.showToast({ title: mergedOptions.message, duration: mergedOptions.duration, position: uniPositionMap[mergedOptions.position], icon: mergedOptions.icon || uniIconMap[mergedOptions.type], mask: true, }) // #endif } export const toast = { success: (message: string, options?: Omit) => showToast({ ...options, type: 'success', message }), error: (message: string, options?: Omit) => showToast({ ...options, type: 'error', message }), warning: (message: string, options?: Omit) => showToast({ ...options, type: 'warning', message }), info: (message: string, options?: Omit) => showToast({ ...options, type: 'info', message }), }