初识SweetAlert2——一个人性化的JavaScript弹窗

温馨提示:本文最后修改于 157 天前,部分内容可能已经过时。如文章内容或静态资源失效,请联系我进行更新,谢谢~

SweetAlert2

前言

近日不经意间看到了一个很新奇的东西——SweetAlert2,这是一个很人性化的用JavaScript写的对话框弹窗,相对于系统自带的来说友好了很多,或许以后能用上。于是折腾了一下。

前排踩坑提醒:GitHub上有两个很类似的项目,地址分别是https://github.com/t4t5/sweetalerthttps://github.com/sweetalert2/sweetalert2,貌似是开始是一位dalao独自开发,后来又来一位大仙根据前者的原理又写了一个?(其实我也不是很清楚QAQ,清楚的同志们欢迎在空荡荡的评论区告诉我~)而国内的中文教程数量本来就不多,有的教程你根本不知它在讲哪一个......我花了很长时间才明白这个道理QAQ

下面要讲的是https://github.com/sweetalert2/sweetalert2这个版本的。尽管star数比另一个少,但开发状态更积极一些。

安装或引用

使用npm安装(推荐)

npm install --save sweetalert2

然后你就能在\node_modules\sweetalert2\dist\路径下找到对应的CSS和js文件。将他们引入:

<link href="./node_modules/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
<script src="./node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>

使用CDN直接引入

国内的bootCDN:https://www.bootcdn.cn/limonte-sweetalert2/

<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<link href="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.min.css" rel="stylesheet">

版本比自己npm安装的稍微旧一些,所以推荐npm。

食用方法 举个栗子

引用部分和其他html框架的部分均省略
  • 打印出一句话
<script src="./js/jquery-3.4.1.min.js"></script>//jQuery也可以的,效果一样
<body>
    <button class="print">显示</button>
    <button onclick="sw()">显示</button>
</body>

<script>
    $('.print').on('click', function () {
        swal.fire('打印出一句话');
    })
    var sw = function () {
        swal.fire('打印出一句话');
    }
</script>

效果都是一样的:

2019-06-15 (2).png

  • 简单的用户交互
<body>
    <button onclick="work()">打工</button>
</body>
<script>
var work = function () {
        swal.fire({
            title: '你要打工嘛?',
            text: '你确定要打工?',
            type: 'question',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: '我要打工!',
            cancelButtonText: '我不要打工!',
            confirmButtonClass: 'btn btn-danger',
            cancelButtonClass: 'btn btn-success',
            buttonsStyling: true,
        }).then((result) => {
            if (result.value) {
                swal.fire(
                    '你去打工了',
                    '有精神领袖呢,非打工干啥...',
                    'info',
                )
            }
            else {
                swal.fire(
                    '打工是不可能的',
                    '打工是不可能打工的,这辈子都不可能打工的',
                    'success',
                )
            }
        })
    }
</script>

效果如图:

2333.gif

关于详细的配置,可以到下方的中文网去查看。

但获取最新的资料最好还是去英文官网https://sweetalert2.github.io

参考资料

sweetalert2/sweetalert2: A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript

https://sweetalert2.github.io

SweetAlert2中文 —— 一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JavaScript弹窗

漂亮的弹窗插件 —— SweetAlert教程 | stage's blog

~~End Of File~~

本文永久链接:https://blog.xmgspace.me/archives/sweet-alert-2.html

本文文章标题:初识SweetAlert2——一个人性化的JavaScript弹窗

本站欢迎转载与引用~但您需要注明文章标题与链接,并表明转载/引用自Xiaomage's Blog。

授权协议:署名-非商业性使用-相同方式共享 4.0 国际(CC BY 4.0)

标签:前端 , Javascript

还没有人评论哦,还不快抢沙发~

添加新评论

i_f01.pngi_f02.pngi_f03.pngi_f04.pngi_f05.pngi_f06.pngi_f07.pngi_f08.pngi_f09.pngi_f10.pngi_f11.pngi_f12.pngi_f13.pngi_f14.pngi_f15.pngi_f16.pngi_f17.pngi_f18.pngi_f19.pngi_f20.pngi_f21.pngi_f22.pngi_f23.pngi_f24.pngi_f25.pngi_f26.pngi_f27.pngi_f28.pngi_f29.pngi_f30.pngi_f31.pngi_f32.pngi_f33.png