SweetAlert2 Using

文前言

一開始沒打算寫這篇的，因為覺得用法不難
但沒想到真實是複雜的...

主文

官方文件：

• SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
• sweetalert2/sweetalert2: ✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦🇪🇺

基礎

看官方文件就可以解決9成的需求，所以不在此贅述。

指定主題

指定的主題是 boostrap

在 v11.14.4 指定很簡單：引用 sweetalert2.min.js 跟 bootstrap-4.css 就好

但在目前最新版 v11.26.24，這樣引用反而依舊會套預設主題？！(想改成用 Bootstrap5)
於是拿去發問 issue 得到了：

Swal.fire({
  ...
  theme: 'bootstrap-5',
});

這樣的寫法。

在官方 code 裡找到了：sweetalert2/src/utils/params.js at 93ff2b64b5b95a934b8c01b4156eae006cfd990d · sweetalert2/sweetalert2

預設值

那麼難道我每寫一個 swal 就要寫一個 theme 嗎？會不會太麻煩？
所以就研究一下有沒有全域設定的方法。

[前端] 快速上手讓人驚豔的JS alert、confirm dialog - SweetAlert2 (含整合ASP.net WebForm範例碼) | 高級打字員的技術雲 - 點部落
參照這支，得知了有個寫法叫做 swal.setDefaults

然而實際使用發現沒效，為甚麼呢？
答案就是：Remove setDefaults and resetDefaults · Issue #1364 · sweetalert2/sweetalert2
=> 它被棄用了！

取代的寫法：Refactor/extract withGlobalDefaults by zenflow · Pull Request #1045 · sweetalert2/sweetalert2

var Swal2 = Swal.mixin({
    theme: 'bootstrap-5',
});

Swal2.fire({
    title: 'TITLE',
    text: 'sub text',
    icon: 'info'
});

類似以上寫法就可以成功了！

UPDATE LOG

115. 04/15 開篇