前言

前两天我在写一个前端项目是发现的这个框架，使用了一下发现很好用。SweetAlert 是非常漂亮的 JavaScript 警报功能的替代品。

他的官方介绍是：SweetAlert 让弹窗更容易、更美观。

使用介绍

下载安装

• 通过bower安装：

bower install sweetalert

• 通过npm安装

npm install sweetalert --save

import swal from 'sweetalert';

• src标签引入

注意：SweetAlert需要等到所有DOM元素加载完毕后才可使用

使用

• 弹出一个alert的写法

 第一个参数是标题，第二个参数是内容，第三个参数是提醒类型（success,error,warning）

还可以自定义button按钮内容

• 使用Promise

SweetAlert 使用Promise来跟踪用户如何与警报交互。

用户如果点击确定按钮，则会返回true，如果点击外部内容则返回null

• 自定义按钮

SweetAlert 可以自定义button内容，同时也可以将button设置为一个数组

        swal("确定吗", {
            buttons: ["Yes!", "No!"],
        });

也可以使用buttons: false,来取消显示按钮

• 自定义内容

        swal("请输入内容", {
                content: "input",
            })
            .then((value) => {
                swal(`你输入了: ${value}`);
            });

        swal({
            content: {
                element: "input",
                attributes: {
                    placeholder: "请输入你的密码",
                    type: "password",
                },
            },
        });

SweetAlert搭配axios食用更佳