SpringBoot+SweetAlert2(附源碼)

SweetAlert2是一款功能強大的純Js模态消息對話框插件

先附上源碼：https://gitee.com/zlh0816/SpringBootSweetAlert2

一、前期準備

① 在pom.xml中添加依賴

// sweetalert2依賴
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>sweetalert2</artifactId>
    <version>2.1.3.RELEASE</version>
</dependency>

// 添加jquery包
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1-1</version>
</dependency>
           

② 在頁面中引入檔案

//sweetalert2 css檔案
<link rel="stylesheet" href="webjars/sweetalert2/7.28.10/dist/sweetalert2.min.css">

//sweetalert2 js檔案
<script src="webjars/sweetalert2/7.28.10/dist/sweetalert2.min.js"></script>

//jquery檔案
<script src="webjars/jquery/3.3.1-1/jquery.min.js"></script>
           

二、使用

1. 基本資訊

Swal.fire({
    title: "标題",
    text: "文本"
})
           

2. 帶有标題、圖示、文本的資訊

Swal.fire({
    title: "标題",
    text: "文本",
    type: "success"
})
           

3. 插入自定義HTML描述

Swal.fire({
    title: "标題",
    html: "<a href='javascript:void(alert(0))'>超連結</a>",
    type: "info"
})
           

4. 插入圖檔

Swal.fire({
    title: "标題",
    text: "圖檔",
    imageUrl: "https://avatar.csdn.net/C/3/2/3_weixin_42909660.jpg",
    imageWidth: 150,
    imageHeight: 150
})
           

5. 自定義背景

Swal.fire({
    title: "标題",
    text: "圖檔",
    type: "error",
    background: "#d8dcfa",     //提示框背景
    backdrop: "#f0f0f0 url('https://sweetalert2.github.io/images/trees.png')"  //頁面背景
})
           

6. 自動關閉

Swal.fire({
    title: "标題",
    text: "兩秒後自動關閉",
    type: "question",
    timer: 2000
})
           

7. 帶有資訊的

Swal.fire({
    title: "标題",
    html: "<strong></strong> 毫秒後自動關閉",
    type: "question",
    timer: 2000,
    onBeforeOpen: function () {
        Swal.showLoading();     //顯示加載進度條
        timeInterval = setInterval(function () {
            Swal.getContent().querySelector("strong").textContent = Swal.getTimerLeft();
        }, 100);
    },
    onClose: function () {
        clearInterval(timeInterval);
    }
})
           

8. input輸入框

Swal.fire({
    title: "标題一",
    input: "text",
    type: "question"
}).then(function (result) {
    Swal.fire({
        title: "标題二",
        text: "輸出内容：" + result.value,
        type: "success"
    })
})
           

9. 按鈕資訊

Swal.fire({
    title: "是否删除",
    type: "warning",
    confirmButtonText: "确認",         //修改确認按鈕文本資訊
    confirmButtonColor: "lightgreen",  //修改确認按鈕顔色
    showCancelButton: true,           //啟動取消按鈕
    cancelButtonText: "取消",          //修改取消按鈕文本資訊
    cancelButtonColor: "red"           //修改取消按鈕顔色
})
           

10. 按鈕點選函數

Swal.fire({
    title: "是否删除",
    type: "warning",
    confirmButtonText: "确認",        //修改确認按鈕文本資訊
    showCancelButton: true,           //啟動取消按鈕
    cancelButtonText: "取消"          //修改取消按鈕文本資訊
}).then(function (result) {
    if (result.value) {
        Swal.fire({
            title: "删除成功",
            type: "success"
        })
    } else {
        Swal.fire({
            title: "删除失敗",
            type: "error"
        })
    }
})
           

11. Ajax請求

Swal.fire({
    title: "是否删除",
    input: "text",
    type: "warning",
    confirmButtonText: "确認",        //修改确認按鈕文本資訊
    showCancelButton: true,           //啟動取消按鈕
    cancelButtonText: "取消"         //修改取消按鈕文本資訊
}).then(function (result) {
    if (result.value) {
        $.post("/test/" + result.value, callBack, "json");
        function callBack(data) {
            if (data == true) {
                Swal.fire({
                    title: "删除成功",
                    type: "success"
                })
            } else {
                Swal.fire({
                    title: "删除失敗",
                    type: "error"
                })
            }
        }
    }
})
           

常用參數

參數	預設值	描述
title	模态對話框的标題。它可以在參數對象的title參數中設定，也可以在swal()方法的第一個參數設定。
text	模态對話框的内容。它可以在參數對象的text參數中設定，也可以在swal()方法的第二個參數設定。
html	對話框中的内容作為HTML标簽。如果同時提供text和html參數，插件将會優先使用text參數。
type	對話框的情景類型。有5種内置的情景類型：warning，error，success，info和question。它可以在參數對象的type參數中設定，也可以在swal()方法的第三個參數設定。
customClass	模态對話框的自定義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	确認按鈕的自定義class類。
cancelButtonClass	取消按鈕的自定義class類。
buttonsStyling	true	為按鈕添加預設的swal2樣式。如果你想使用自己的按鈕樣式，可以将該參數設定為false。
reverseButtons	false	如果你想反向顯示按鈕的位置，設定該參數為true。
showLoaderOnConfirm	false	設定為true時，按鈕被禁用，并顯示一個在加載的進度條。該參數用于AJAX請求的情況。
preConfirm	在确認之前執行的函數，傳回一個Promise對象。
imageUrl	為模态對話框自定義圖檔。指向一幅圖檔的URL位址。
imageWidth	如果設定了imageUrl參數，可以為圖檔設定顯示的寬度，機關像素。
imageHeight	如果設定了imageUrl參數，可以為圖檔設定顯示的高度，機關像素。
imageClass	自定義的圖檔class類。
timer	自動關閉對話框的定時器，機關毫秒。
width	500	模态視窗的寬度，包括padding值（box-sizing: border-box）。
padding	20	模态視窗的padding内邊距。
background	“#fff”	模态視窗的背景顔色。
input	表單input域的類型，可以是"text", “email”, “password”, “textarea”, “select”, “radio”, “checkbox” 和 “file”。
inputPlaceholder	“”	input域的占位符。
inputValue	“”	input域的初始值。
inputOptions	{} 或 Promise	如果input的值是select或radio，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。
inputAutoTrim	true	是否自動清除傳回字元串前後兩端的空白。
inputValidator	是否對input域進行校驗，傳回Promise對象。
inputClass	自定義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域。

詳見：https://sweetalert2.github.io/