SweetAlert2.js 模态消息使用入门

淡淡的烟草味﹌ 2022-04-22 15:16 110阅读 0赞

### 一.前言 ###

SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框，功能非常强大。  
官方文档: [https://sweetalert2.github.io/][https_sweetalert2.github.io]

### 二.引入包 ###

使用SweetAlert2对话框需要在页面中引入sweetalert2.min.css和sweetalert2.min.js文件，为了兼容IE浏览器，还需要引入promise.min.js文件。

### 三.基本使用 ###

##### 1.对话框 #####

(1) 基础对话框

Swal('hello world')

![在这里插入图片描述][20190114085948517.png]  
(2)或者多参数设置对话框

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

![在这里插入图片描述][20190114104203182.png]

##### 2.弹出一个带情景模式的对话框 #####

(1)可以在的第三个参数中设置

Swal(
                    '标题',
                    '内容',
                    'question'
            )

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]  
(2)同时也可以通过下面的方法来处理对话框的用户交互：

swal({ 
                title: '确定?',
                text: '您将无法恢复此文件!',
                type: '警告',
                showCancelButton: true,
                confirmButtonText: '确定,删除',
                cancelButtonText: '取消',
            }).then(function(isConfirm) { 
                if (isConfirm.value) { 
                    swal(
                            '已删除!',
                            '文件已删除',
                            'success'
                    );
                }
            });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 2]  
(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>确认'
            })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 3]

##### 3.定时关闭对话框 #####

3秒后自动关闭对话框

swal({ 
    			title: "自动关闭",
    			text: "将在三秒钟自动关闭该对话框？",
    			showConfirmButton: false,
    			timer: 3000
    		})

![在这里插入图片描述][20190114104547308.png]

##### 4.输入框 #####

(1) input 类型

swal({ 
                title: "请输入您的姓名",
                input: 'text',
                confirmButtonText: '确定',
                confirmButtonColor: '#4cd964'
            }).then(function(result) { 
                if(result) { 
                    swal({ 
                        title: '结果',
                        text: result,
                        confirmButtonText: '确定',
                        confirmButtonColor: '#4cd964'
                    });
                }
            });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 4]  
(2) textarea类型

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 5]

### 四.模态对话框的类型 ###

sweetalert2提供了5种情景模式的对话框:  
![在这里插入图片描述][1015286-20160829170734746-393251113.jpg]  
**配置参数**

<table> 
 <thead> 
  <tr> 
   <td>参数</td> 
   <td>默认值</td> 
   <td>描述</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>null</td> 
   <td>模态对话框的标题。它可以在参数对象的<code>title</code>参数中设置，也可以在<code>swal()</code>方法的第一个参数设置。</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>null</td> 
   <td>模态对话框的内容。它可以在参数对象的<code>text</code>参数中设置，也可以在<code>swal()</code>方法的第二个参数设置。</td> 
  </tr> 
  <tr> 
   <td>html</td> 
   <td>null</td> 
   <td>对话框中的内容作为HTML标签。如果同时提供<code>text</code>和<code>html</code>参数，插件将会优先使用<code>text</code>参数。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>null</td> 
   <td>对话框的情景类型。有5种内置的情景类型：<code>warning</code>，<code>error</code>，<code>success</code>，<code>info</code>和<code>question</code>。它可以在参数对象的<code>type</code>参数中设置，也可以在<code>swal()</code>方法的第三个参数设置。</td> 
  </tr> 
  <tr> 
   <td>customClass</td> 
   <td>null</td> 
   <td>模态对话框的自定义class类。</td> 
  </tr> 
  <tr> 
   <td>animation</td> 
   <td>true</td> 
   <td>如果设置为false，对话框将不会有动画效果。</td> 
  </tr> 
  <tr> 
   <td>allowOutsideClick</td> 
   <td>true</td> 
   <td>是否允许点击对话框外部来关闭对话框。</td> 
  </tr> 
  <tr> 
   <td>allowEscapeKey</td> 
   <td>true</td> 
   <td>是否允许按下Esc键来关闭对话框。</td> 
  </tr> 
  <tr> 
   <td>showConfirmButton</td> 
   <td>true</td> 
   <td>是否显示“Confirm（确认）”按钮。</td> 
  </tr> 
  <tr> 
   <td>showCancelButton</td> 
   <td>false</td> 
   <td>是否显示“Cancel（取消）”按钮。</td> 
  </tr> 
  <tr> 
   <td>confirmButtonText</td> 
   <td>"OK"</td> 
   <td>确认按钮上的文本。</td> 
  </tr> 
  <tr> 
   <td>cancelButtonText</td> 
   <td>"Cancel"</td> 
   <td>取消按钮上的文本。</td> 
  </tr> 
  <tr> 
   <td>confirmButtonColor</td> 
   <td>"#3085d6"</td> 
   <td>确认按钮的颜色。必须是HEX颜色值。</td> 
  </tr> 
  <tr> 
   <td>cancelButtonColor</td> 
   <td>"#aaa"</td> 
   <td>取消按钮的颜色。必须是HEX颜色值。</td> 
  </tr> 
  <tr> 
   <td>confirmButtonClass</td> 
   <td>null</td> 
   <td>确认按钮的自定义class类。</td> 
  </tr> 
  <tr> 
   <td>cancelButtonClass</td> 
   <td>null</td> 
   <td>取消按钮的自定义class类。</td> 
  </tr> 
  <tr> 
   <td>buttonsStyling</td> 
   <td>true</td> 
   <td>为按钮添加默认的swal2样式。如果你想使用自己的按钮样式，可以将该参数设置为false。</td> 
  </tr> 
  <tr> 
   <td>reverseButtons</td> 
   <td>false</td> 
   <td>如果你想反向显示按钮的位置，设置该参数为true。</td> 
  </tr> 
  <tr> 
   <td>showLoaderOnConfirm</td> 
   <td>false</td> 
   <td>设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况。</td> 
  </tr> 
  <tr> 
   <td>preConfirm</td> 
   <td>null</td> 
   <td>在确认之前执行的函数，返回一个Promise对象。</td> 
  </tr> 
  <tr> 
   <td>imageUrl</td> 
   <td>null</td> 
   <td>为模态对话框自定义图片。指向一幅图片的URL地址。</td> 
  </tr> 
  <tr> 
   <td>imageWidth</td> 
   <td>null</td> 
   <td>如果设置了<code>imageUrl</code>参数，可以为图片设置显示的宽度，单位像素。</td> 
  </tr> 
  <tr> 
   <td>imageHeight</td> 
   <td>null</td> 
   <td>如果设置了<code>imageUrl</code>参数，可以为图片设置显示的高度，单位像素。</td> 
  </tr> 
  <tr> 
   <td>imageClass</td> 
   <td>null</td> 
   <td>自定义的图片class类。</td> 
  </tr> 
  <tr> 
   <td>timer</td> 
   <td>null</td> 
   <td>自动关闭对话框的定时器，单位毫秒。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>500</td> 
   <td>模态窗口的宽度，包括padding值（<code>box-sizing: border-box</code>）。</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>20</td> 
   <td>模态窗口的padding内边距。</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>"#fff"</td> 
   <td>模态窗口的背景颜色。</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>null</td> 
   <td>表单input域的类型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。</td> 
  </tr> 
  <tr> 
   <td>inputPlaceholder</td> 
   <td>""</td> 
   <td>input域的占位符。</td> 
  </tr> 
  <tr> 
   <td>inputValue</td> 
   <td>""</td> 
   <td>input域的初始值。</td> 
  </tr> 
  <tr> 
   <td>inputOptions</td> 
   <td>{} 或 Promise</td> 
   <td>如果<code>input</code>的值是<code>select</code>或<code>radio</code>，你可以为它们提供选项。对象的key代表选项的值，value代表选项的文本值。</td> 
  </tr> 
  <tr> 
   <td>inputAutoTrim</td> 
   <td>true</td> 
   <td>是否自动清除返回字符串前后两端的空白。</td> 
  </tr> 
  <tr> 
   <td>inputValidator</td> 
   <td>null</td> 
   <td>是否对input域进行校验，返回Promise对象。</td> 
  </tr> 
  <tr> 
   <td>inputClass</td> 
   <td>null</td> 
   <td>自定义input域的class类。</td> 
  </tr> 
 </tbody> 
</table>

**方法**

<table> 
 <thead> 
  <tr> 
   <td>方法</td> 
   <td>描述</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>swal.setDefaults({Object})</td> 
   <td>当你在使用SweetAlert2时有大量的自定义参数，可以通过<code>swal.setDefaults({Object})</code>方法来将它们设置为默认参数。</td> 
  </tr> 
  <tr> 
   <td>swal.resetDefaults()</td> 
   <td>重置设置的默认值。</td> 
  </tr> 
  <tr> 
   <td>swal.queue([Array])</td> 
   <td>提供一个数组形式的SweetAlert2参数，用于显示多个对话框。对话框将会一个接一个的出现。</td> 
  </tr> 
  <tr> 
   <td> swal.close() <br> 或 swal.closeModal() </td> 
   <td> 以编程的方式关闭当前打开的SweetAlert2对话框。 </td> 
  </tr> 
  <tr> 
   <td> swal.enableButtons() </td> 
   <td>确认和关闭按钮可用。 </td> 
  </tr> 
  <tr> 
   <td> swal.disableButtons() </td> 
   <td> 禁用确认和关闭按钮。 </td> 
  </tr> 
  <tr> 
   <td> swal.enableLoading() <br> 或 swal.showLoading() </td> 
   <td> 禁用按钮并显示加载进度条。通常用于AJAX请求。 </td> 
  </tr> 
  <tr> 
   <td> swal.disableLoading() <br> 或 swal.hideLoading() </td> 
   <td> 隐藏进度条并使按钮可用。 </td> 
  </tr> 
  <tr> 
   <td> swal.clickConfirm() </td> 
   <td> 以编程的方式点击确认按钮。 </td> 
  </tr> 
  <tr> 
   <td> swal.clickCancel() </td> 
   <td> 以编程的方式点击取消按钮。 </td> 
  </tr> 
  <tr> 
   <td> swal.showValidationError(error) </td> 
   <td> 显示表单校验错误信息。 </td> 
  </tr> 
  <tr> 
   <td> swal.resetValidationError() </td> 
   <td> 隐藏表单校验错误信息。 </td> 
  </tr> 
  <tr> 
   <td> swal.enableInput() </td> 
   <td> 使input域可用。 </td> 
  </tr> 
  <tr> 
   <td> swal.disableInput() </td> 
   <td> 禁用input域。 </td> 
  </tr> 
 </tbody> 
</table>

[https_sweetalert2.github.io]: https://sweetalert2.github.io/
[20190114085948517.png]: /images/20220327/9bb7e1a32bf84f92865a83e7193e81fd.png
[20190114104203182.png]: /images/20220327/9b81c2c000f3404c9da13d0ff0a88d24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]: /images/20220327/040a0826a614479183cbc1c2b6e93763.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 1]: /images/20220327/03d30050d63f4b4081c6911ea8193112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 2]: /images/20220327/772597d14c0144c99ba14bf1341c9af8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 3]: /images/20220327/2103b4e1257e46b0b76f8aedae850240.png
[20190114104547308.png]: /images/20220327/ee63dfb1f1fd49ce93a0ce0123a1b9b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 4]: /images/20220327/d303246e32f2416aaa0e6de582a803d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 5]: /images/20220327/d45b5398b61b4e3fb9c33c9a747ca761.png
[1015286-20160829170734746-393251113.jpg]: /images/20220327/38e72d348040435686280e1561f5470a.png