SweetAlert2

1.SweetAlert2

1.1快速部署

國內SweetAlert2cdn

https://www.bootcdn.cn/limonte-sweetalert2/

SweetAlert部署文件

https://pan.baidu.com/s/1BFXctrsgE_26HJU3XT1lcg

1.2SweetAlert2官方文檔

https://sweetalert2.github.io/#examples

1.3一.前言

SweetAlert2是一款功能強大的純Js模態消息對話框插件。SweetAlert2用於替代瀏覽器默認的彈出對話框，它提供各類參數和方法，支持嵌入圖片，背景，HTML標籤等，SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標籤的問題，並對彈出對話框進行了優化，同時提供對各類表單元素的支持，還增長了5種情景模式的模態對話框，功能很是強大。
官方文檔: https://sweetalert2.github.io/

 

1.4基本使用

1.對話框

(1) 基礎對話框

Swal('hello world')

 

(2)或者多參數設置對話框

swal({
            title: '提示',
            text: "早上好",
            confirmButtonText: '確認',
            confirmButtonColor: 'Green',
        })

 

(3)右上角通知類彈窗

Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
})

 

(4)自定義 第三方 css 的 彈框 (推薦使用 Animate.css )

Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
})

(5)帶有定位和消失時間的彈框

Swal.fire({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})
 

(6)2.帶有展現標籤內容的彈框

var content = "無記錄";
var msg=""; //msg 是從外面傳入的數據

if (msg) {

    content = "<p style='color: red'>最近一次操做後的5小時內有效</p> "
        + "<p>能夠使用 Ctrl +F 查找關鍵字</p>"
        + "<table class='table_list'>"
        + "<tr>"
        + "     <th class='js_tr_data'> 時間</th> <th>名稱</th> <th>密碼</th>"
        + "</tr>"
        + msg
        + "</table>"
}

Swal.fire({
    title: '<strong>記錄</strong>',
    type: 'info',
    html: content, // HTML
    focusConfirm: true, //聚焦到肯定按鈕
    showCloseButton: true,//右上角關閉
})
 

 

2.彈出一個帶情景模式的對話框

(1)能夠在的第三個參數中設置

Swal(
                '標題',
                '內容',
                'question'
        )

 

(2)同時也能夠經過下面的方法來處理對話框的用戶交互：

swal({
            title: '肯定?',
            text: '您將沒法恢復此文件!',
            type: '警告',
            showCancelButton: true,
            confirmButtonText: '肯定,刪除',
            cancelButtonText: '取消',
        }).then(function(isConfirm) {
            if (isConfirm.value) {
                swal(
                        '已刪除!',
                        '文件已刪除',
                        'success'
                );
            }
        });

 

(3)自定義html對話框內容

swal({
            title: '<h2 style="font-weight:bold;color:red">舒適提示</h2>',
            type: 'info',
            html: '<a href="http://www.baidu.com" style="color:green">自定義的html內容</a>',
            showCloseButton: true,
            showCancelButton: true,
            confirmButtonColor: 'gray',
            cancelButtonColor: '#3fc3ee',
            confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',
            cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>確認'
        })

 

 

3.定時關閉對話框

3秒後自動關閉對話框

swal({
            title: "自動關閉",
            text: "將在三秒鐘自動關閉該對話框？",
            showConfirmButton: false,
            timer: 3000
        })

 

 

4.輸入框

(1) input 類型

swal({
            title: "請輸入您的姓名",
            input: 'text',
            confirmButtonText: '肯定',
            confirmButtonColor: '#4cd964'
        }).then(function(result) {
            if(result) {
                swal({
                    title: '結果',
                    text: result,
                    confirmButtonText: '肯定',
                    confirmButtonColor: '#4cd964'
                });
            }
        });

 

(2) textarea類型

 swal({
            input: 'textarea',
            confirmButtonText: '肯定',
            confirmButtonColor: '#4cd964'
        }).then(function(result) {
            if(result) {
                swal({
                    title: '結果通知',
                    text: result,
                    confirmButtonText: '肯定',
                    confirmButtonColor: '#4cd964'
                });
            }
        });

 

5.如何作一個本身的通用模版

//定義模版 (可屢次使用)
var MyBox = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
});

//調用
MyBox.fire({
    type: 'success',
    title: 'successfully'
});
 

 

 

1.5模態對話框的類型

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({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+