当前位置：首页 > news >正文

每日前端宝藏库 | Toastify.js ✨

news 2025/9/18 6:35:52

💬 “不到 5KB，却让通知体验起飞。” —— 前端开发者集体认证 ✅

🎯 一句话介绍

Toastify.js 是一个 超轻量（< 5KB）、无依赖、零配置 的 JavaScript 消息提示库 🎯，无需框架，CDN 一行引入，一行代码弹出通知，支持自定义位置、样式、动画、自动关闭，还能点击关闭！🖱️💫

🎨 它不打扰用户，却总能精准传达信息 —— 真正的“通知艺术”。🎨

🤔 为什么你需要它？

传统痛点 ❌	Toastify.js ✅
自己写 toast 样式逻辑繁琐 😩	开箱即用，30 秒集成 ⚡
依赖 UI 框架（如 Ant Design、Element）📦	零依赖，原生 JS，适合任何项目 🛠️
样式丑、位置固定 📏	支持 6 个位置，可自定义样式 🎭
无法自定义行为（如不自动关闭）🚫	支持 `onClick`, `onClose`, `duration` 等 🧩
移动端适配差 📱	响应式设计，触摸友好 ✋

🚀 快速上手：3 步起飞！

Step 1️⃣：安装它！（或直接 CDN）

npm install toastify-js
# 或 yarn
yarn add toastify-js

💡 更推荐 CDN 快速体验（适合原型、小项目）：

<!-- CSS 可选，自带默认样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Step 2️⃣：最简调用！✨

Toastify({text: "🎉 你好，这是第一条通知！",duration: 3000, // 3秒后自动关闭
}).showToast();

🎉 效果：右上角弹出一个优雅的通知！💫

Step 3️⃣：进阶配置 🎨

Toastify({text: "✅ 数据保存成功！",duration: 5000,destination: "https://example.com", // 点击跳转newWindow: true,close: true, // 显示关闭按钮gravity: "top", // `top` or `bottom`position: "right", // `left`, `center` or `right`stopOnFocus: true, // 鼠标悬停暂停关闭style: {background: "linear-gradient(to right, #00b09b, #96c93d)",},onClick: function(){console.log("通知被点击了！");}
}).showToast();

✅ 支持渐变背景、点击行为、防快速关闭，定制自由度超高！🎨

💻 在线测试沙盒 🧪

👉 动手试试这个“一发入魂”的通知吧！✨

<!-- 引入 CDN -->
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"><button onclick="showSuccess()">成功提示</button>
<button onclick="showError()">错误提示</button>
<button onclick="showCustom()">自定义样式</button><script>
function showSuccess() {Toastify({text: "✅ 操作成功！",duration: 3000,gravity: "top",position: "center",style: { background: "green" }}).showToast();
}function showError() {Toastify({text: "❌ 网络连接失败",duration: 4000,gravity: "bottom",position: "left",style: { background: "red" }}).showToast();
}function showCustom() {Toastify({text: "✨ 这是一个渐变通知！",duration: 5000,gravity: "top",position: "right",style: {background: "linear-gradient(45deg, #ff6b6b, #feca57)",borderRadius: "12px",fontWeight: "bold"},offset: {x: 50, // 水平偏移y: 100 // 垂直偏移}}).showToast();
}
</script>

🔗 在线测试推荐：

StackBlitz - Toastify.js 沙盒

🎨 核心特性一览 🌟

特性	说明
`gravity: "top"`	弹出方向：顶部或底部
`position: "right"`	水平位置：左 / 中 / 右
`duration: 3000`	自动关闭时间（0 表示不关闭）
`close: true`	显示关闭按钮 ✖️
`style: {}`	内联样式，自由定制外观 🎨
`onClick()`	点击回调，可跳转或执行逻辑 🔗
`offset: {x,y}`	位置微调，避免遮挡 📏

🧩 高级玩法 🎮

1️⃣ 自定义 SVG 图标 🖼️

Toastify({text: "🔔 有新消息",duration: 4000,style: {display: "flex",alignItems: "center",gap: "8px"},avatar: "data:image/svg+xml,...", // SVG base64
}).showToast();

2️⃣ 全局配置（减少重复代码）🔧

// 设置默认选项
Toastify.defaults = {duration: 4000,gravity: "top",position: "right",stopOnFocus: true
};// 之后调用更简洁
Toastify({ text: "简洁通知！" }).showToast();

📊 适用场景 🎯

✅ 表单提交成功/失败提示 📝
🔔 新消息提醒 💬
🔄 操作反馈（删除、保存）🗑️
🌐 PWA 离线状态提示 📴
📱 移动端轻量通知 📲

🏁 总结：Toastify.js 是你的“通知小助手” 🤖📬

评分	内容
🚀 易用性	⭐⭐⭐⭐⭐
📦 体积	⭐⭐⭐⭐☆
🎨 可定制性	⭐⭐⭐⭐☆
📱 兼容性	⭐⭐⭐⭐⭐
💡 推荐指数	🔥🔥🔥🔥🔥