初识SweetAlert2——一个人性化的JavaScript弹窗
本文最后更新于 469 天前,其中的信息可能已经有所发展或是发生改变。

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).jpg

  • 简单的用户交互
<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

本文永久链接:https://blog.xmgspace.me/archives/sweet-alert-2.html
本文文章标题:初识SweetAlert2——一个人性化的JavaScript弹窗
如文章内无特殊说明,只要您标明转载/引用自Xiaomage's Blog,您就可以自由的转载/引用文章。
授权协议:署名-非商业性使用-相同方式共享 4.0 国际(CC BY 4.0)
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇