SweetAlert2 实现对话框

这节课我们学习使用 SweetAlert2 制作更漂亮的对话框

系统的 alert 还是丑丑的，所以我们来看看 SweetAlert2 吧~

引入

直接通过 require 引入即可

// @require https://cdn.jsdelivr.net/npm/sweetalert2@11

使用

更详细的说明文档我们可以查看官方文档

例子

一些例子

基础例子

• 基础对话框
• 标题图标
• 页脚
• 超长图片
• 自定义 html
• 三个按钮
• 指定位置

Swal.fire("Any fool can use a computer");

进阶例子

• 动画效果
• 创建配置实例
• 周期钩子
• 异步请求

Swal.fire({
  title: "Custom animation with Animate.css",
  showClass: {
    popup: "animate__animated animate__fadeInDown",
  },
  hideClass: {
    popup: "animate__animated animate__fadeOutUp",
  },
});

提示

此效果需要配合 animate.css 实现，

为了减少不必要的依赖引入，此处直接移植了精简的CSS。

关于代码的同步运行和异步运行钩子

SweetAlert2 的钩子分为两种，一种是同步运行，一种是异步运行

同步运行的代码是在运行到某个位置之后调用你的函数，然后继续执行代码

而异步执行代码则是在执行到对应位置后，则保证在未来调用你的函数

关于这点，可以在源代码找到：

if (typeof params.didOpen === "function") {
  setTimeout(() => params.didOpen(popup));
}

didOpen 是一个异步代码，如果 didOpen 存在，则利用 setTimeout 进行回调并执行

setTimeout 是一个异步代码，当主任务完成后，则会回调 setTimeout 异步触发 didOpen 函数

关于为什么使用异步钩子，我倾向的认为是为了完成窗口的绘制后，再允许用户进行一定的操控和修改

最后再通过回调钩子进行处理