SweetAlert2是一款功能強大的純Js模態消息對話框插件。SweetAlert2用於替代瀏覽器默認的彈出對話框，它提供各種參數和方法，支持嵌入圖片，背景，HTML標簽等，並提供5種內置的情景類，功能非常強大。
SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，並對彈出對話框進行了優化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態對話框。
安裝
可以通過bower或npm來安裝sweetalert2對話框插件。
bower install sweetalert2 npm install sweetalert2
使用方法
使用SweetAlert2對話框需要在頁面中引入sweetalert2.min.css和sweetalert2.min.js文件，為了兼容IE瀏覽器，還需要引入promise.min.js文件。
<link rel="stylesheet" type="text/css" href="path/to/sweetalert2/dist/sweetalert2.min.css"> <script src="path/to/sweetalert2/dist/sweetalert2.min.js"></script> <!-- for IE support --> <script src="path/to/es6-promise/promise.min.js"></script>
基本使用
最基本的使用方法是通過swal()來彈出一個對話框。
swal('Hello world!');
如果要彈出一個帶情景模式的對話框，可以在的第二個參數中設置。
swal('Oops...', 'Something went wrong!', 'error');
你可以通過下面的方法來處理對話框的用戶交互：
swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it',
}).then(function(isConfirm) {
if (isConfirm === true) {
swal(
'Deleted!',
'Your imaginary file has been deleted.',
'success'
);
} else if (isConfirm === false) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
} else {
// Esc, close button or outside click
// isConfirm is undefined
}
});
swal(...)會返回一個Promise對象，該Promise對象中then方法中的isConfirm參數的含義如下：
true：代表Confirm（確認）按鈕。false：代表Cancel（取消）按鈕。undefined：代表按下Esc鍵，點擊取消按鈕或在對話框之外點擊。
模態對話框的類型
sweetalert2提供了5種情景模式的對話框。
配置參數
| 參數 | 默認值 | 描述 |
| title | null | 模態對話框的標題。它可以在參數對象的title參數中設置，也可以在swal()方法的第一個參數設置。 |
| text | null | 模態對話框的內容。它可以在參數對象的text參數中設置，也可以在swal()方法的第二個參數設置。 |
| html | null | 對話框中的內容作為HTML標簽。如果同時提供text和html參數，插件將會優先使用text參數。 |
| type | null | 對話框的情景類型。有5種內置的情景類型：warning，error，success，info和question。它可以在參數對象的type參數中設置，也可以在swal()方法的第三個參數設置。 |
| customClass | null | 模態對話框的自定義class類。 |
| animation | true | 如果設置為false，對話框將不會有動畫效果。 |
| allowOutsideClick | true | 是否允許點擊對話框外部來關閉對話框。 |
| allowEscapeKey | true | 是否允許按下Esc鍵來關閉對話框。 |
| showConfirmButton | true | 是否顯示“Confirm（確認）”按鈕。 |
| showCancelButton | false | 是否顯示“Cancel（取消）”按鈕。 |
| confirmButtonText | "OK" | 確認按鈕上的文本。 |
| cancelButtonText | "Cancel" | 取消按鈕上的文本。 |
| confirmButtonColor | "#3085d6" | 確認按鈕的顏色。必須是HEX顏色值。 |
| cancelButtonColor | "#aaa" | 取消按鈕的顏色。必須是HEX顏色值。 |
| confirmButtonClass | null | 確認按鈕的自定義class類。 |
| cancelButtonClass | null | 取消按鈕的自定義class類。 |
| buttonsStyling | true | 為按鈕添加默認的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數設置為false。 |
| reverseButtons | false | 如果你想反向顯示按鈕的位置，設置該參數為true。 |
| showLoaderOnConfirm | false | 設置為true時，按鈕被禁用，並顯示一個在加載的進度條。該參數用於AJAX請求的情況。 |
| preConfirm | null | 在確認之前執行的函數，返回一個Promise對象。 |
| imageUrl | null | 為模態對話框自定義圖片。指向一幅圖片的URL地址。 |
| imageWidth | null | 如果設置了imageUrl參數，可以為圖片設置顯示的寬度，單位像素。 |
| imageHeight | null | 如果設置了imageUrl參數，可以為圖片設置顯示的高度，單位像素。 |
| imageClass | null | 自定義的圖片class類。 |
| timer | null | 自動關閉對話框的定時器，單位毫秒。 |
| width | 500 | 模態窗口的寬度，包括padding值（box-sizing: border-box）。 |
| padding | 20 | 模態窗口的padding內邊距。 |
| background | "#fff" | 模態窗口的背景顏色。 |
| input | null | 表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。 |
| inputPlaceholder | "" | input域的占位符。 |
| inputValue | "" | input域的初始值。 |
| inputOptions | {} 或 Promise | 如果input的值是select或radio，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。 |
| inputAutoTrim | true | 是否自動清除返回字符串前后兩端的空白。 |
| inputValidator | null | 是否對input域進行校驗，返回Promise對象。 |
| inputClass | null | 自定義input域的class類。 |
你可以使用swal.setDefaults(customParams)方法來覆蓋默認的參數，customParams是一個對象。
方法
| 方法 | 描述 |
| swal.setDefaults({Object}) | 當你在使用SweetAlert2時有大量的自定義參數，可以通過swal.setDefaults({Object})方法來將它們設置為默認參數。 |
| swal.resetDefaults() | 重置設置的默認值。 |
| swal.queue([Array]) | 提供一個數組形式的SweetAlert2參數，用於顯示多個對話框。對話框將會一個接一個的出現。 |
| swal.close() 或 swal.closeModal() |
以編程的方式關閉當前打開的SweetAlert2對話框。 |
| swal.enableButtons() | 確認和關閉按鈕可用。 |
| swal.disableButtons() | 禁用確認和關閉按鈕。 |
| swal.enableLoading() 或 swal.showLoading() |
禁用按鈕並顯示加載進度條。通常用於AJAX請求。 |
| swal.disableLoading() 或 swal.hideLoading() |
隱藏進度條並使按鈕可用。 |
| swal.clickConfirm() | 以編程的方式點擊確認按鈕。 |
| swal.clickCancel() | 以編程的方式點擊取消按鈕。 |
| swal.showValidationError(error) | 顯示表單校驗錯誤信息。 |
| swal.resetValidationError() | 隱藏表單校驗錯誤信息。 |
| swal.enableInput() | 使input域可用。 |
| swal.disableInput() | 禁用input域。 |