簡要教程

SweetAlert2是一款功能強大的純Js模態(tài)消息對話框插件。SweetAlert2用于替代瀏覽器默認的彈出對話框，它提供各種參數(shù)和方法，支持嵌入圖片，背景，HTML標簽等，并提供5種內(nèi)置的情景類，功能非常強大。

SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，并對彈出對話框進行了優(yōu)化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態(tài)對話框。

安裝

可以通過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!');

如果要彈出一個帶情景模式的對話框，可以在的第二個參數(shù)中設置。

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參數(shù)的含義如下：

• true：代表Confirm（確認）按鈕。

• false：代表Cancel（取消）按鈕。

• undefined：代表按下Esc鍵，點擊取消按鈕或在對話框之外點擊。

模態(tài)對話框的類型

sweetalert2提供了5種情景模式的對話框。

配置參數(shù)

方法

瀏覽器兼容

SweetAlert2可以工作在所有的現(xiàn)代瀏覽器中：

• IE: 10+（需要引入Promise文件）

• Microsoft Edge: 12+

• Safari: 4+

• Firefox: 4+

• Chrome 14+

• Opera: 15+