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

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

安裝

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

bower install sweetalert2 npm install sweetalert2

使用方法

使用SweetAlert2對(duì)話框需要在頁(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ì)話框。

swal('Hello world!');

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

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

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

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ì)話框之外點(diǎn)擊。

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

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

配置參數(shù)

參數(shù)默認(rèn)值描述titlenull模態(tài)對(duì)話框的標(biāo)題。它可以在參數(shù)對(duì)象的title參數(shù)中設(shè)置，也可以在swal()方法的第一個(gè)參數(shù)設(shè)置。textnull模態(tài)對(duì)話框的內(nèi)容。它可以在參數(shù)對(duì)象的text參數(shù)中設(shè)置，也可以在swal()方法的第二個(gè)參數(shù)設(shè)置。htmlnull對(duì)話框中的內(nèi)容作為HTML標(biāo)簽。如果同時(shí)提供text和html參數(shù)，插件將會(huì)優(yōu)先使用text參數(shù)。typenull對(duì)話框的情景類型。有5種內(nèi)置的情景類型：warning，error，success，info和question。它可以在參數(shù)對(duì)象的type參數(shù)中設(shè)置，也可以在swal()方法的第三個(gè)參數(shù)設(shè)置。customClassnull模態(tài)對(duì)話框的自定義class類。animationtrue如果設(shè)置為false，對(duì)話框?qū)⒉粫?huì)有動(dòng)畫效果。allowOutsideClicktrue是否允許點(diǎn)擊對(duì)話框外部來(lái)關(guān)閉對(duì)話框。allowEscapeKeytrue是否允許按下Esc鍵來(lái)關(guān)閉對(duì)話框。showConfirmButtontrue是否顯示“Confirm（確認(rèn)）”按鈕。showCancelButtonfalse是否顯示“Cancel（取消）”按鈕。confirmButtonText"OK"確認(rèn)按鈕上的文本。cancelButtonText"Cancel"取消按鈕上的文本。confirmButtonColor"#3085d6"確認(rèn)按鈕的顏色。必須是HEX顏色值。cancelButtonColor"#aaa"取消按鈕的顏色。必須是HEX顏色值。confirmButtonClassnull確認(rèn)按鈕的自定義class類。cancelButtonClassnull取消按鈕的自定義class類。buttonsStylingtrue為按鈕添加默認(rèn)的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數(shù)設(shè)置為false。reverseButtonsfalse如果你想反向顯示按鈕的位置，設(shè)置該參數(shù)為true。showLoaderOnConfirmfalse設(shè)置為true時(shí)，按鈕被禁用，并顯示一個(gè)在加載的進(jìn)度條。該參數(shù)用于AJAX請(qǐng)求的情況。preConfirmnull在確認(rèn)之前執(zhí)行的函數(shù)，返回一個(gè)Promise對(duì)象。imageUrlnull為模態(tài)對(duì)話框自定義圖片。指向一幅圖片的URL地址。imageWidthnull如果設(shè)置了imageUrl參數(shù)，可以為圖片設(shè)置顯示的寬度，單位像素。imageHeightnull如果設(shè)置了imageUrl參數(shù)，可以為圖片設(shè)置顯示的高度，單位像素。imageClassnull自定義的圖片class類。timernull自動(dòng)關(guān)閉對(duì)話框的定時(shí)器，單位毫秒。width500模態(tài)窗口的寬度，包括padding值（box-sizing: border-box）。padding20模態(tài)窗口的padding內(nèi)邊距。background"#fff"模態(tài)窗口的背景顏色。inputnull表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。inputPlaceholder""input域的占位符。inputValue""input域的初始值。inputOptions{} 或 Promise如果input的值是select或radio，你可以為它們提供選項(xiàng)。對(duì)象的key代表選項(xiàng)的值，value代表選項(xiàng)的文本值。inputAutoTrimtrue是否自動(dòng)清除返回字符串前后兩端的空白。inputValidatornull是否對(duì)input域進(jìn)行校驗(yàn)，返回Promise對(duì)象。inputClassnull自定義input域的class類。

你可以使用swal.setDefaults(customParams)方法來(lái)覆蓋默認(rèn)的參數(shù)，customParams是一個(gè)對(duì)象。

方法

方法描述swal.setDefaults({Object})當(dāng)你在使用SweetAlert2時(shí)有大量的自定義參數(shù)，可以通過(guò)swal.setDefaults({Object})方法來(lái)將它們?cè)O(shè)置為默認(rèn)參數(shù)。swal.resetDefaults()重置設(shè)置的默認(rèn)值。swal.queue([Array])提供一個(gè)數(shù)組形式的SweetAlert2參數(shù)，用于顯示多個(gè)對(duì)話框。對(duì)話框?qū)?huì)一個(gè)接一個(gè)的出現(xiàn)。swal.close()

或 swal.closeModal()以編程的方式關(guān)閉當(dāng)前打開的SweetAlert2對(duì)話框。swal.enableButtons()確認(rèn)和關(guān)閉按鈕可用。swal.disableButtons()禁用確認(rèn)和關(guān)閉按鈕。swal.enableLoading()

或 swal.showLoading()禁用按鈕并顯示加載進(jìn)度條。通常用于AJAX請(qǐng)求。swal.disableLoading()

或 swal.hideLoading()隱藏進(jìn)度條并使按鈕可用。swal.clickConfirm()以編程的方式點(diǎn)擊確認(rèn)按鈕。swal.clickCancel()以編程的方式點(diǎn)擊取消按鈕。swal.showValidationError(error)顯示表單校驗(yàn)錯(cuò)誤信息。swal.resetValidationError()隱藏表單校驗(yàn)錯(cuò)誤信息。swal.enableInput()使input域可用。swal.disableInput()禁用input域。

瀏覽器兼容

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

• IE: 10+（需要引入Promise文件）
• Microsoft Edge: 12+
• Safari: 4+
• Firefox: 4+
• Chrome 14+
• Opera: 15+

SweetAlert2模態(tài)對(duì)話框插件的github地址為：https://github.com/limonte/sweetalert2

SweetAlert2模態(tài)對(duì)話框插件的官方教程地址為：https://sweetalert2.github.io/

SweetAlert2使用教程?www.aliyun01.com

總結(jié)

以上是生活随笔為你收集整理的使用html() undefined_SweetAlert2使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。