Toastify-JS 使用教程

最新推荐文章于 2025-05-06 23:10:20 发布

原创最新推荐文章于 2025-05-06 23:10:20 发布 · 900 阅读

16 ·

CC 4.0 BY-SA版权

Toastify-JS 使用教程

toastify-jsPure JavaScript library for better notification messages项目地址:https://gitcode.com/gh_mirrors/to/toastify-js

项目介绍

Toastify-JS 是一个纯 JavaScript 编写的轻量级通知库，旨在提供优雅且易于自定义的通知消息。它不依赖于任何外部库，使得在任何项目中集成变得非常简单。Toastify-JS 支持自定义持续时间、位置、样式等，适用于需要在网页上显示临时消息的场景。

项目快速启动

安装

你可以通过 npm 安装 Toastify-JS：

npm install toastify-js

或者直接在 HTML 文件中引入 CDN 链接：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.js"></script>

基本使用

以下是一个简单的示例，展示如何在网页中显示一个 Toast 通知：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toastify-JS 示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
</head>
<body>
    <button onclick="showToast()">显示通知</button>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.js"></script>
    <script>
        function showToast() {
            Toastify({
                text: "这是一个 Toast 通知",
                duration: 3000,
                gravity: "top", // 顶部显示
                position: "right", // 右侧显示
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                stopOnFocus: true // 点击通知后停止自动关闭
            }).showToast();
        }
    </script>
</body>
</html>