SweetAlert-優化彈出提醒框的JS插件

當我們需要在網頁上彈出提醒框時，常規的alert()方法並不能給人很好的使用體驗，SweetAlert是一個讓彈出提醒框變得更加優化的JS插件，可以讓我們自定義彈出框的樣式、動畫效果，甚至可以添加按鈕，直接響應用戶的操作。

一、SweetAlert2

SweetAlert2是SweetAlert的第二代版本，它重構了SweetAlert，在強化了原有功能的基礎上，拓展了很多新功能。使用sweetalert2.css、sweetalert2.min.js兩個文件即可輕鬆使用，SweetAlert2支持Promise，可以更好地支持非同步操作，而且在Webpack等工具中能夠打包，易於使用。

二、SweetAlert使用說明

使用SweetAlert非常簡單，只需在需要調用的地方使用以下代碼：

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script>
    swal("提示信息","操作成功！","success");
</script>

其中sweetalert.min.js為SweetAlert的JS文件，sweetalert.css是樣式文件，以上代碼可以在網頁被載入時就執行，彈出一個簡單的提示框，提示框會在2s後自動消失。

三、SweetAlert官網

SweetAlert的官網提供了很多有關SweetAlert的介紹和用法，大家可以在官網學習到SweetAlert的所有功能及API，官網的鏈接如下：

https://sweetalert2.github.io/

四、SweetAlert讀音

SweetAlert這個名字是由「Sweet」和「Alert」組成的，Sweet的意思是「甜美」的，而Alert的意思是「警告」，所以SweetAlert的中文意思就是「甜美警告」，讀音類似英文單詞中的「sweet」和「alert」。

五、SweetAlert2教程

在SweetAlert2教程中，我們會學習SweetAlert2的使用方法，能夠自定義彈出框的樣式、位置、動畫效果和按鈕等基本的功能，SweetAlert2的API也會有所介紹。

首先，我們需要在網頁中引用sweetalert2.min.js和sweetalert2.min.css文件，接著就可以在JS代碼中調用SweetAlert2插件了，例如：

swal({
  title: "您確定嗎？",
  text: "確定後，訂單將完成並不可更改！",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("訂單已完成！", {
      icon: "success",
    });
  } else {
    swal("訂單取消！");
  }
});

以上代碼可以彈出一個包含警告圖標的提示框，裡面有帶有確認和取消兩個按鈕，用戶操作後會有相應的響應。

六、SweetAlert視頻教程

SweetAlert也有很多視頻教程可以供我們學習，通過視頻教程能夠更好地了解SweetAlert的使用方法和原理，Youtube上有很多這樣的SweetAlert視頻教程。

七、SweetAlert2新版教程

SweetAlert2的新版教程可以讓我們快速掌握SweetAlert2的API使用方法，通過實例幫助我們更好地理解。

例如：

Swal.fire({
  title: '賬號登錄',
  html:
    '<input id="swal-input1" class="swal2-input" placeholder="輸入用戶名">' +
    '<input id="swal-input2" class="swal2-input" placeholder="輸入密碼">',
  focusConfirm: false,
  preConfirm: () => {
    const username = Swal.getPopup().querySelector('#swal-input1').value
    const password = Swal.getPopup().querySelector('#swal-input2').value
    if (!username || !password) {
      Swal.showValidationMessage(`請輸入用戶名和密碼`)
    }
    return { username: username, password: password }
  }
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: `Welcome ${result.value.username}!`,
      text: `密碼已確認：${result.value.password}`
    })
  }
})

以上代碼可以在SweetAlert2中創建一個提示框，彈出提示框需要用戶輸入用戶名和密碼，並在確認後輸出相應信息。

八、SweetAlert插件怎麼用

使用SweetAlert插件需要我們在網頁中引入sweetalert.min.js和sweetalert.css文件，SweetAlert只能應用在擁有HTML5框架的應用中。

示例：

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script>
    document.querySelector('#btn').onclick = function(){
        swal({
            title: "提示信息",
            text: "請先登錄再進行操作。",
            type: "warning",
            showCancelButton: true, 
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "去登錄",
            cancelButtonText: "我再看看",
            closeOnConfirm: false 
        },
        function(){
            window.location.href = "login.html";    
        });
    };
</script>

以上代碼實現了一個綁定了一個按鈕的SweetAlert插件，當用戶點擊按鈕後，會彈出一個警告框，提示用戶需要先登錄才能進行操作，用戶可以選擇確認去登錄，否則關閉提示框，仍滯留在當前頁面。

九、SweetAlert2定義多個按鈕

SweetAlert2也支持定義多個按鈕，我們可以在options參數中添加buttons數組，定義多個按鈕的類型和文本內容，例如：

Swal.fire({
  title: '要開始倒計時嗎？',
  width: 600,
  padding:'3em',
  background: '#fff url(/images/trees.png)',
  backdrop: `
    rgba(0,0,123,0.4)
    url("/images/nyan-cat.gif")
    left top
    no-repeat
  `,
  timerProgressBar: true,
  timer: 5000,
  showCancelButton: true,
  cancelButtonColor: '#6D6D6D',
  cancelButtonText: '取消',
  buttons: [
      '開始',
      '先休息一下'
  ]
}).then((result) => {
        if (result.isConfirmed) {
          Swal.fire({
            title: `開始!`,
            text: `倒計時開始！`,
            timer: 5000,
            timerProgressBar: true,
            icon: 'success',
            background:'#fff',
            
          })
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire({
            title: '休息一下！',
            icon: 'error',
            background:'red',
          })
        }
      })

以上代碼定義了兩個按鈕：「開始」和「先休息一下」，當用戶點擊開始按鈕時，倒計時開始；當用戶點擊休息按鈕時，會彈出一個錯誤提示框，告知用戶先休息一下。

總結

通過本篇文章的講解，我們對SweetAlert插件的使用有了一定的了解。SweetAlert可以讓我們創建更加優美的提醒框，可以讓我們自由地定義樣式、添加按鈕等操作，可以帶給用戶更好的使用體驗。同時，SweetAlert還有很多的拓展和API，使用起來非常方便。