简单介绍

官方地址:SweetAlert2


这是一款浏览器默认弹窗的替代插件,浏览器默认弹窗有两种类型,alert 和 confirm,样式简陋,功能单一,如下图:


alert 示例

image.png


confirm 示例
image.png


而该插件会提供一种比较优雅的样式。如下图:

image.png


引入文件

安装方式,建议采用 bower,版本建议安装 7.32.0,安装命令: bower install --save sweetalert2#7.32.0 ,截止写该文档的时候,装 8.0 版本,发现 bower 库里缺少文件


<!-- sweetalert2 -->
<link rel="stylesheet" href="/sweetalert2/dist/sweetalert2.min.css">

<!-- sweetalert2 -->
<script src="/sweetalert2/dist/sweetalert2.all.min.js"></script>


该插件是不需要依赖 jQuery 的。


简单使用

该插件除了提供默认弹出框的替代方案,还提供了一些类似 bootstrap 模态框的功能。术业有专攻,该插件只使用弹出框部分功能即可,其他功能有些多余。


image.png


弹出框分为:基础信息框、复杂信息框。


基础信息框

传入三个字符串参数即可,分别为:标题,描述,类型。如下代码:


swal(
  'Good job!',
  'You clicked the button!',
  'success'
)


类型分为 5 种,提供不同的图标样式。具体可以对照在线演示查看效果。



复杂信息框

传入参数对象,这里介绍两个常用示例,一个是自动消失框,一个是对话框。


swal({
  type: 'warning',
  title: 'Auto close alert!',
  text: 'I will close in 2 seconds.',
  timer: 2000
})


自动消失框,传入 timer 参数即可,单位毫秒。


swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  // confirmButtonClass: 'btn btn-success btn-sm',
  // cancelButtonClass: 'btn btn-danger btn-sm',
  // buttonsStyling: false
}).then(function (isConfirm) {
  console.log(isConfirm);
  if (isConfirm.value === true) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    );
  } else if(isConfirm.dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    );
  }
})


上述代码需要注意的是,isConfirm 是个对象,点击 YES 的时候,value 为 true,点击 NO 的时候,dismiss 为 cancel,这个设计又有点醉醉的。不过最终效果,还是不错的,如下图:


image.png