前言

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

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

使用介绍

下载安装

  • 通过bower安装:

bower install sweetalert

  • 通过npm安装

npm install sweetalert --save

import swal from 'sweetalert';

  • src标签引入

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

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

使用

  • 弹出一个alert的写法

    <script>
        swal({
            title: "你好",
            text: 'www.xxhzm.cn',
            icon: 'success'
        })
    </script>

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

还可以自定义button按钮内容

 <script>
        swal({
            title: "你好",
            text: 'www.xxhzm.cn',
            icon: 'success',
            button: "OK!",
        })
   </script>

  • 使用Promise

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

    <script>
        swal("请点击按钮或者点击外部内容")
            .then((value) => {
                swal(`${value}`);
            });
    </script>

用户如果点击确定按钮,则会返回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食用更佳

最后修改:2022 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏