toasteur.min.js是一款弹出层通知消息插件-BFW插件库

toasteur.min.js是一款弹出层通知消息插件

安装

CDN

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toasteur-default.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toasteur.min.js"></script>

NPM

npm install toasteur

并将其导入您的项目中

const Toasteur = require('toasteur');

let myToasteur = new Toasteur("top-right");

browserify index.js -o bundle.js

配置

1、更改默认弹出位置

let myToasteur = new Toasteur("bottom-left"); // 默认是左右方top-right

可接受的值为：

top-left
top-right
bottom-left
bottom-right
top-center
bottom-center

2、更改默认持续时间

let myToasteur = new Toasteur("bottom-left", 5000);
// 5000毫秒默认

3、将新通知放在堆的顶部/底部

您可以选择将新通知放在堆的顶部或底部。

let myToasteur = new Toasteur("bottom-left", 5000, "top");
// can be "top" or "bottom" ^^^^

4、创建 Toast 通知

要创建 toast 通知，您可以使用以下方法：

成功：myToasteur.success()

错误：myToasteur.error()

警告：myToasteur.warn()

信息：myToasteur.info()

这个函数可以接受 3 个参数，第一个是必需的：

要显示的消息

消息的标题（可选）

点击 toast 时的回调（可选）

成功✅

myToasteur.success("This is a success message, click me!", "Success!", () => {
console.log("Clicked!");
});

错误⛔

myToasteur.error("This is an error, click me!", "Error!", () => {
console.log("Clicked!")
});

警告⚠️

myToasteur.warn("This is a warning, click me!", "Warning!", () => {
console.log("Clicked!");
});

信息ℹ️

myToasteur.info("This is an info, click me!", "Info!", () => {
console.log("Clicked!");
});

完整示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/toasteur-default.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toasteur.min.js"></script>
</head>

<body style="background-color: mediumslateblue; color: white">

    <button onclick="success();">弹出成功提示</button>

    <button onclick="error();">弹出错误提示</button>

    <button onclick="info();">弹出信息提示</button>

    <button onclick="warn();">弹出警告提示</button>
    <script>
        function success(){
            new Toasteur().success("This is a success message, Click me!", 'Success!', () => {
               console.log("回调");
            })
        }
        
            function error(){
            new Toasteur("top-right").error("This is an error message, Click me!", 'Error!', () => {
                    console.log("回调");
                })
        }
        function info(){
             new Toasteur("top-right").info("This is an info message, Click me!", 'Info!', () => {
                        new Toasteur("top-right").warn("This is a warning message, Click me!", 'Warning!')
                    })
        }
       
     function warn(){
            new Toasteur("top-right").warn("This is a warning message, Click me!", 'Warning!')
        }
    </script>
</body>

</html>

github地址：https://github.com/SkwalExe/Toasteur.js