SweetAlert2 使用教程

野性酷女 2021-07-04 22:07 576阅读 0赞

`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({ 
      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(...)`会返回一个`Promise`对象，该`Promise`对象中`then`方法中的`isConfirm`参数的含义如下：

*  `true`：代表`Confirm`（确认）按钮。
 *  `false`：代表`Cancel`（取消）按钮。
 *  `undefined`：代表按下`Esc`键，点击取消按钮或在对话框之外点击。

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

`sweetalert2`提供了5种情景模式的对话框。  
![在这里插入图片描述][20201111214356663.png]

## 配置参数 ##

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>null</td> 
   <td>模态对话框的标题。它可以在参数对象的title参数中设置，也可以在swal()方法的第一个参数设置。</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>null</td> 
   <td>模态对话框的内容。它可以在参数对象的text参数中设置，也可以在swal()方法的第二个参数设置。</td> 
  </tr> 
  <tr> 
   <td>html</td> 
   <td>null</td> 
   <td>对话框中的内容作为HTML标签。如果同时提供text和html参数，插件将会优先使用text参数。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>null</td> 
   <td>对话框的情景类型。有5种内置的情景类型：warning，error，success，info和question。它可以在参数对象的type参数中设置，也可以在swal()方法的第三个参数设置。</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>如果设置了imageUrl参数，可以为图片设置显示的宽度，单位像素。</td> 
  </tr> 
  <tr> 
   <td>imageHeight</td> 
   <td>null</td> 
   <td>如果设置了imageUrl参数，可以为图片设置显示的高度，单位像素。</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值（box-sizing: border-box）。</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>如果input的值是select或radio，你可以为它们提供选项。对象的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>

你可以使用`swal.setDefaults(customParams)`方法来覆盖默认的参数，`customParams`是一个对象。

## 方法 ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>swal.setDefaults({Object})</td> 
   <td>当你在使用SweetAlert2时有大量的自定义参数，可以通过swal.setDefaults({Object})方法来将它们设置为默认参数。</td> 
  </tr> 
  <tr> 
   <td>swal.resetDefaults()</td> 
   <td>重置设置的默认值。</td> 
  </tr> 
  <tr> 
   <td>swal.queue([Array])</td> 
   <td>提供一个数组形式的SweetAlert2参数，用于显示多个对话框。对话框将会一个接一个的出现。</td> 
  </tr> 
  <tr> 
   <td>swal.close()</td> 
   <td>以编程的方式关闭当前打开的SweetAlert2对话框。</td> 
  </tr> 
  <tr> 
   <td>或 swal.closeModal()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>swal.enableButtons()</td> 
   <td>确认和关闭按钮可用。</td> 
  </tr> 
  <tr> 
   <td>swal.disableButtons()</td> 
   <td>禁用确认和关闭按钮。</td> 
  </tr> 
  <tr> 
   <td>swal.enableLoading()</td> 
   <td>禁用按钮并显示加载进度条。通常用于AJAX请求。</td> 
  </tr> 
  <tr> 
   <td>或 swal.showLoading()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>swal.disableLoading()</td> 
   <td>隐藏进度条并使按钮可用。</td> 
  </tr> 
  <tr> 
   <td>或 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>

[20201111214356663.png]: /images/20210704/917fcafed98c49b287e23111729c49f7.png