【轉載】SweetAlert2 使用

SweetAlert2是一款功能強大的純Js模态消息對話框插件。SweetAlert2用于替代浏覽器預設的彈出對話框，它提供各種參數和方法，支援嵌入圖檔，背景，HTML标簽等，并提供5種内置的情景類，功能非常強大。

SweetAlert2是SweetAlert-js的更新版本，它解決了SweetAlert-js中不能嵌入HTML标簽的問題，并對彈出對話框進行了優化，同時提供對各種表單元素的支援，還增加了5種情景模式的模态對話框。

可以通過bower或npm來安裝sweetalert2對話框插件。

1

2

<code>bower install sweetalert2</code>

<code>npm install sweetalert2</code>

使用SweetAlert2對話框需要在頁面中引入sweetalert2.min.css和sweetalert2.min.js檔案，為了相容IE浏覽器，還需要引入promise.min.js檔案。

3

4

<code>&lt;link rel=</code><code>"stylesheet"</code> <code>type=</code><code>"text/css"</code> <code>href=</code><code>"path/to/sweetalert2/dist/sweetalert2.min.css"</code><code>&gt;</code>

<code>&lt;script src=</code><code>"path/to/sweetalert2/dist/sweetalert2.min.js"</code><code>&gt;&lt;/script&gt;</code>

<code>&lt;!-- </code><code>for</code> <code>IE support --&gt;</code>

<code>&lt;script src=</code><code>"path/to/es6-promise/promise.min.js"</code><code>&gt;&lt;/script&gt;  </code>

最基本的使用方法是通過<code>swal()</code>來彈出一個對話框。

<code>swal(</code><code>'Hello world!'</code><code>);</code>

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

<code>swal(</code><code>'Oops...'</code><code>, </code><code>'Something went wrong!'</code><code>, </code><code>'error'</code><code>);</code>

你可以通過下面的方法來處理對話框的使用者互動：

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<code>swal({</code>

<code>  </code><code>title: </code><code>'Are you sure?'</code><code>,</code>

<code>  </code><code>text: </code><code>'You will not be able to recover this imaginary file!'</code><code>,</code>

<code>  </code><code>type: </code><code>'warning'</code><code>,</code>

<code>  </code><code>showCancelButton: </code><code>true</code><code>,</code>

<code>  </code><code>confirmButtonText: </code><code>'Yes, delete it!'</code><code>,</code>

<code>  </code><code>cancelButtonText: </code><code>'No, keep it'</code><code>,</code>

<code>}).then(function(isConfirm) {</code>

<code>  </code><code>if</code> <code>(isConfirm === </code><code>true</code><code>) {</code>

<code>    </code><code>swal(</code>

<code>      </code><code>'Deleted!'</code><code>,</code>

<code>      </code><code>'Your imaginary file has been deleted.'</code><code>,</code>

<code>      </code><code>'success'</code>

<code>    </code><code>);</code>

<code> </code> 

<code>  </code><code>} </code><code>else</code> <code>if</code> <code>(isConfirm === </code><code>false</code><code>) {</code>

<code>      </code><code>'Cancelled'</code><code>,</code>

<code>      </code><code>'Your imaginary file is safe :)'</code><code>,</code>

<code>      </code><code>'error'</code>

<code>  </code><code>} </code><code>else</code> <code>{</code>

<code>    </code><code>// Esc, close button or outside click</code>

<code>    </code><code>// isConfirm is undefined</code>

<code>  </code><code>}</code>

<code>}); </code>

<code>swal(...)</code>會傳回一個Promise對象，該Promise對象中<code>then</code>方法中的<code>isConfirm</code>參數的含義如下：

<code>true</code>：代表Confirm（确認）按鈕。

<code>false</code>：代表Cancel（取消）按鈕。

<code>undefined</code>：代表按下Esc鍵，點選取消按鈕或在對話框之外點選。

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

參數

預設值

描述

title

null

模态對話框的标題。它可以在參數對象的<code>title</code>參數中設定，也可以在<code>swal()</code>方法的第一個參數設定。

text

模态對話框的内容。它可以在參數對象的<code>text</code>參數中設定，也可以在<code>swal()</code>方法的第二個參數設定。

html

對話框中的内容作為HTML标簽。如果同時提供<code>text</code>和<code>html</code>參數，插件将會優先使用<code>text</code>參數。

type

對話框的情景類型。有5種内置的情景類型：<code>warning</code>，<code>error</code>，<code>success</code>，<code>info</code>和<code>question</code>。它可以在參數對象的<code>type</code>參數中設定，也可以在<code>swal()</code>方法的第三個參數設定。

customClass

模态對話框的自定義class類。

animation

true

如果設定為false，對話框将不會有動畫效果。

allowOutsideClick

是否允許點選對話框外部來關閉對話框。

allowEscapeKey

是否允許按下Esc鍵來關閉對話框。

showConfirmButton

是否顯示“Confirm（确認）”按鈕。

showCancelButton

false

是否顯示“Cancel（取消）”按鈕。

confirmButtonText

"OK"

确認按鈕上的文本。

cancelButtonText

"Cancel"

取消按鈕上的文本。

confirmButtonColor

"#3085d6"

确認按鈕的顔色。必須是HEX顔色值。

cancelButtonColor

"#aaa"

取消按鈕的顔色。必須是HEX顔色值。

confirmButtonClass

确認按鈕的自定義class類。

cancelButtonClass

取消按鈕的自定義class類。

buttonsStyling

為按鈕添加預設的swal2樣式。如果你想使用自己的按鈕樣式，可以将該參數設定為false。

reverseButtons

如果你想反向顯示按鈕的位置，設定該參數為true。

showLoaderOnConfirm

設定為true時，按鈕被禁用，并顯示一個在加載的進度條。該參數用于AJAX請求的情況。

preConfirm

在确認之前執行的函數，傳回一個Promise對象。

imageUrl

為模态對話框自定義圖檔。指向一幅圖檔的URL位址。

imageWidth

如果設定了<code>imageUrl</code>參數，可以為圖檔設定顯示的寬度，機關像素。

imageHeight

如果設定了<code>imageUrl</code>參數，可以為圖檔設定顯示的高度，機關像素。

imageClass

自定義的圖檔class類。

timer

自動關閉對話框的定時器，機關毫秒。

width

500

模态視窗的寬度，包括padding值（<code>box-sizing: border-box</code>）。

padding

模态視窗的padding内邊距。

background

"#fff"

模态視窗的背景顔色。

input

表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。

inputPlaceholder

""

input域的占位符。

inputValue

input域的初始值。

inputOptions

{} 或 Promise

如果<code>input</code>的值是<code>select</code>或<code>radio</code>，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。

inputAutoTrim

是否自動清除傳回字元串前後兩端的空白。

inputValidator

是否對input域進行校驗，傳回Promise對象。

inputClass

自定義input域的class類。

你可以使用<code>swal.setDefaults(customParams)</code>方法來覆寫預設的參數，<code>customParams</code>是一個對象。

方法

swal.setDefaults({Object})

當你在使用SweetAlert2時有大量的自定義參數，可以通過<code>swal.setDefaults({Object})</code>方法來将它們設定為預設參數。

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+