848 字
2 分钟
AyWebToast
简介
AyWebToast 是一款纯 JavaScript 与 CSS 构建的 Toast 轻提示组件，专为 Web 应用设计。它提供了加载中、成功提示、错误提示等常见反馈样式，支持自定义显示时长，可手动关闭，适配移动端与桌面端。
主要功能
- 三种提示类型：普通信息（info）、加载中（loading）、错误（error），自动切换图标。
- 灵活显示时长：支持自定义超时时间（毫秒），传入
0则不自动关闭。 - 手动控制：提供
AyCloseToast()方法，随时手动关闭当前 Toast。 - 自适应内容：宽度自动适应文字长度，支持多行文本，最大宽度限制 80%。
- 视觉反馈：加载图标旋转动画，视觉清晰。
- 移动端优化：适配触屏操作，在移动设备上表现良好。
- 零依赖：无需任何第三方库，引入即可使用。
技术参数
- 语言：JavaScript（ES5+）、CSS3
- 运行环境：浏览器（Chrome、Firefox、Edge、Safari 等）
- 依赖：无
- 样式方案：纯 CSS，自带重置与动画
- 图标：内联 Base64 图片，无需额外资源
- 兼容性：IE11+、现代浏览器全支持
快速开始
引入方式
<!-- 引入 CSS -->
<!-- 移动端专属 移动端和桌面端的CSS应该分开加载 <link rel="stylesheet" href="https://online.undz.cn/login/mobile/toast.css" /> -->
<link rel="stylesheet" href="https://online.undz.cn/login/toast.css" />
<!-- 引入 JS --><script src="https://online.undz.cn/login/toast.js"></script>基本用法
// 显示加载中（不自动关闭）AyShowResult("加载中...", "loading", 0);
// 显示成功信息（1.1 秒后自动关闭）AyShowResult("操作成功！", "info", 1100);
// 显示错误信息AyShowResult("网络请求失败", "error", 2000);
// 手动关闭AyCloseToast();
// 支持传入 Error 对象try { // ...} catch (err) { AyShowResult(err);}API 说明
icon: bell date: 2026-07-07 title: “AyWebToast” prev: false next: false
本文介绍了我开发的轻量级 Web Toast 提示组件，专为快速展示加载、成功、错误等反馈信息而设计，零依赖，即插即用。
简介
AyWebToast 是一款纯 JavaScript 与 CSS 构建的 Toast 轻提示组件，专为 Web 应用设计。它提供了加载中、成功提示、错误提示等常见反馈样式，支持自定义显示时长，可手动关闭，适配移动端与桌面端。
主要功能
- 三种提示类型：普通信息（info）、加载中（loading）、错误（error），自动切换图标。
- 灵活显示时长：支持自定义超时时间（毫秒），传入
0则不自动关闭。 - 手动控制：提供
AyCloseToast()方法，随时手动关闭当前 Toast。 - 自适应内容：宽度自动适应文字长度，支持多行文本，最大宽度限制 80%。
- 视觉反馈：加载图标旋转动画，视觉清晰。
- 移动端优化：适配触屏操作，在移动设备上表现良好。
- 零依赖：无需任何第三方库，引入即可使用。
技术参数
- 语言：JavaScript（ES5+）、CSS3
- 运行环境：浏览器（Chrome、Firefox、Edge、Safari 等）
- 依赖：无
- 样式方案：纯 CSS，自带重置与动画
- 图标：内联 Base64 图片，无需额外资源
- 兼容性：IE11+、现代浏览器全支持
快速开始
引入方式
<!-- 引入 CSS -->
<!-- 移动端专属 移动端和桌面端的CSS应该分开加载 <link rel="stylesheet" href="https://online.undz.cn/login/mobile/toast.css" /> -->
<link rel="stylesheet" href="https://online.undz.cn/login/toast.css" />
<!-- 引入 JS --><script src="https://online.undz.cn/login/toast.js"></script>基本用法
// 显示加载中（不自动关闭）AyShowResult("加载中...", "loading", 0);
// 显示成功信息（1.1 秒后自动关闭）AyShowResult("操作成功！", "info", 1100);
// 显示错误信息AyShowResult("网络请求失败", "error", 2000);
// 手动关闭AyCloseToast();
// 支持传入 Error 对象try { // ...} catch (err) { AyShowResult(err);}API 说明
| 函数 | 参数 | 说明 |
|---|---|---|
AyShowResult(data, type, timeout) | data: 消息内容（字符串或 Error 对象）type: 'info'、'loading'、'error'timeout: 自动关闭毫秒数（默认 1100） | 显示 Toast |
AyCloseToast() | 无 | 手动关闭当前 Toast |
许可与版权
- 开源协议：MIT License
- 作者：韵典（AeYunDian）
- 版权年份：2026
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时
相关文章 智能推荐
1
AyAccountSDK.JS
本文介绍了我自主开发的轻量级用户认证 JavaScript SDK，专为 Web 应用快速集成登录、注册及账号管理功能而设计。
2
AyEditor
本文介绍了由我开发的轻量级网页代码编辑器 AyEditor，专为快速编写、调试与保存代码而设计。
3
AyAccount
本文介绍了我独立开发的统一身份认证后端服务，为 Web 与移动应用提供安全、便捷的账号体系。
4
从 VuePress 迁移到 Fuwari
本文记录了我将个人博客从 VuePress 迁移到基于 Astro 的 Fuwari 主题的全过程，包括遇到的各种环境问题、配置难点以及最终的解决方案。希望能给同样想换主题或迁移到 Astro 的朋友一些参考。
5
AyWebPDFRender.js
本文介绍基于 PDF.js 为 Scratch 3.0 开发的 PDF 查看器扩展，提供文件上传、分页浏览、页码查询以及图片数据输出等功能，使 Scratch 项目能够直接集成 PDF 内容。