SweetAlert2 使用教程

2022-04-03 14:28:38 字數 4677 閱讀 8475

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檔案。

基本使用 

最基本的使用方法是通過swal()來彈出乙個對話方塊。

swal('hello world!');
如果要彈出乙個帶情景模式的對話方塊,可以在的第二個引數中設定。

swal('oops...', 'something went wrong!', 'error');
你可以通過下面的方法來處理對話方塊的使用者互動:

swal().then(function(isconfirm)  else if (isconfirm === false)  else 

});

swal(...)會返回乙個promise物件,該promise物件中then方法中的isconfirm引數的含義如下:

模態對話方塊的型別

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

引數預設值

描述title

null

模態對話方塊的標題。它可以在引數物件的title引數中設定,也可以在swal()方法的第乙個引數設定。

text

null

模態對話方塊的內容。它可以在引數物件的text引數中設定,也可以在swal()方法的第二個引數設定。

html

null

對話方塊中的內容作為html標籤。如果同時提供texthtml引數,外掛程式將會優先使用text引數。

type

null

對話方塊的情景型別。有5種內建的情景型別:warningerrorsuccessinfoquestion。它可以在引數物件的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

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的值是selectradio,你可以為它們提供選項。物件的key代表選項的值,value代表選項的文字值。

inputautotrim

true

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

inputvalidator

null

是否對input域進行校驗,返回promise物件。

inputclass

null

自定義input域的class類。

你可以使用swal.setdefaults(customparams)方法來覆蓋預設的引數,customparams是乙個物件。

方法描述

swal.setdefaults()

當你在使用sweetalert2時有大量的自定義引數,可以通過swal.setdefaults()方法來將它們設定為預設引數。

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可以工作在所有的現代瀏覽器中:

sweetalert2模態對話方塊外掛程式的github位址為:

sweetalert外掛程式的使用

urls.py from django.contrib import admin from django.urls import path urlpatterns path admin admin.site.urls path index views.index views.py python de...

2 關於 IntelliJ IDEA 使用教程

由於 intellij idea 官網在亞洲沒有設伺服器,且官網用到一些類似 twitter facebook 等站的指令碼會使得你在國內出現訪問巨慢或是不允許訪問的特殊情況,所以建議你在訪問官網 訪問外掛程式庫 小版本本地迭代更新等操作的時候出現奇怪問題的時候,請自備vpn等網路加速工具。很多使用...

lucene使用教程2 索引技術

我們需要對文件進行預處理,建立一種便於檢索的資料結構,以此來提高資訊檢索的速度,這種資料結構就是索引。目前廣泛使用的一種索引方式是倒排序索引。倒排序索引的原理就如同查字典。要先查目錄,得到資料對應的頁碼,在直接翻到指定的頁碼。不是在文章中找詞,而是從目錄中找詞所在的文章。這需要在索引庫中生成乙個詞彙...