SweetAlert2 使用教程

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域。

瀏覽器兼容

SweetAlert2可以工作在所有的現代瀏覽器中：

• IE: 10+（需要引入Promise文件）
• Microsoft Edge: 12+
• Safari: 4+
• Firefox: 4+
• Chrome 14+
• Opera: 15+

SweetAlert2模態對話框插件的github地址為：https://github.com/limonte/sweetalert2