SweetAlert2強(qiáng)大的純Js模態(tài)消息對(duì)話(huà)框插件

簡(jiǎn)要教程

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

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

安裝

可以通過(guò)bower或npm來(lái)安裝sweetalert2對(duì)話(huà)框插件。

bower install sweetalert2
npm install sweetalert2

使用方法

使用SweetAlert2對(duì)話(huà)框需要在頁(yè)面中引入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>

基本使用

最基本的使用方法是通過(guò)swal()來(lái)彈出一個(gè)對(duì)話(huà)框。

swal('Hello world!');

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

swal('Oops...', 'Something went wrong!', 'error');

你可以通過(guò)下面的方法來(lái)處理對(duì)話(huà)框的用戶(hù)交互：

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(...)會(huì)返回一個(gè)Promise對(duì)象，該P(yáng)romise對(duì)象中then方法中的isConfirm參數(shù)的含義如下：

• true：代表Confirm（確認(rèn)）按鈕。

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

• undefined：代表按下Esc鍵，點(diǎn)擊取消按鈕或在對(duì)話(huà)框之外點(diǎn)擊。

模態(tài)對(duì)話(huà)框的類(lèi)型

sweetalert2提供了5種情景模式的對(duì)話(huà)框。

配置參數(shù)

方法

瀏覽器兼容

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

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

• Microsoft Edge: 12+

• Safari: 4+

• Firefox: 4+

• Chrome 14+

• Opera: 15+