SweetAlert-优化弹出提醒框的JS插件

当我们需要在网页上弹出提醒框时，常规的alert()方法并不能给人很好的使用体验，SweetAlert是一个让弹出提醒框变得更加优化的JS插件，可以让我们自定义弹出框的样式、动画效果，甚至可以添加按钮，直接响应用户的操作。

一、SweetAlert2

SweetAlert2是SweetAlert的第二代版本，它重构了SweetAlert，在强化了原有功能的基础上，拓展了很多新功能。使用sweetalert2.css、sweetalert2.min.js两个文件即可轻松使用，SweetAlert2支持Promise，可以更好地支持异步操作，而且在Webpack等工具中能够打包，易于使用。

二、SweetAlert使用说明

使用SweetAlert非常简单，只需在需要调用的地方使用以下代码：

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script>
    swal("提示信息","操作成功！","success");
</script>

其中sweetalert.min.js为SweetAlert的JS文件，sweetalert.css是样式文件，以上代码可以在网页被加载时就执行，弹出一个简单的提示框，提示框会在2s后自动消失。

三、SweetAlert官网

SweetAlert的官网提供了很多有关SweetAlert的介绍和用法，大家可以在官网学习到SweetAlert的所有功能及API，官网的链接如下：

https://sweetalert2.github.io/

四、SweetAlert读音

SweetAlert这个名字是由“Sweet”和“Alert”组成的，Sweet的意思是“甜美”的，而Alert的意思是“警告”，所以SweetAlert的中文意思就是“甜美警告”，读音类似英文单词中的“sweet”和“alert”。

五、SweetAlert2教程

在SweetAlert2教程中，我们会学习SweetAlert2的使用方法，能够自定义弹出框的样式、位置、动画效果和按钮等基本的功能，SweetAlert2的API也会有所介绍。

首先，我们需要在网页中引用sweetalert2.min.js和sweetalert2.min.css文件，接着就可以在JS代码中调用SweetAlert2插件了，例如：

swal({
  title: "您确定吗？",
  text: "确定后，订单将完成并不可更改！",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("订单已完成！", {
      icon: "success",
    });
  } else {
    swal("订单取消！");
  }
});

以上代码可以弹出一个包含警告图标的提示框，里面有带有确认和取消两个按钮，用户操作后会有相应的响应。

六、SweetAlert视频教程

SweetAlert也有很多视频教程可以供我们学习，通过视频教程能够更好地了解SweetAlert的使用方法和原理，Youtube上有很多这样的SweetAlert视频教程。

七、SweetAlert2新版教程

SweetAlert2的新版教程可以让我们快速掌握SweetAlert2的API使用方法，通过实例帮助我们更好地理解。

例如：

Swal.fire({
  title: '账号登录',
  html:
    '<input id="swal-input1" class="swal2-input" placeholder="输入用户名">' +
    '<input id="swal-input2" class="swal2-input" placeholder="输入密码">',
  focusConfirm: false,
  preConfirm: () => {
    const username = Swal.getPopup().querySelector('#swal-input1').value
    const password = Swal.getPopup().querySelector('#swal-input2').value
    if (!username || !password) {
      Swal.showValidationMessage(`请输入用户名和密码`)
    }
    return { username: username, password: password }
  }
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: `Welcome ${result.value.username}!`,
      text: `密码已确认：${result.value.password}`
    })
  }
})

以上代码可以在SweetAlert2中创建一个提示框，弹出提示框需要用户输入用户名和密码，并在确认后输出相应信息。

八、SweetAlert插件怎么用

使用SweetAlert插件需要我们在网页中引入sweetalert.min.js和sweetalert.css文件，SweetAlert只能应用在拥有HTML5框架的应用中。

示例：

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script>
    document.querySelector('#btn').onclick = function(){
        swal({
            title: "提示信息",
            text: "请先登录再进行操作。",
            type: "warning",
            showCancelButton: true, 
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "去登录",
            cancelButtonText: "我再看看",
            closeOnConfirm: false 
        },
        function(){
            window.location.href = "login.html";    
        });
    };
</script>

以上代码实现了一个绑定了一个按钮的SweetAlert插件，当用户点击按钮后，会弹出一个警告框，提示用户需要先登录才能进行操作，用户可以选择确认去登录，否则关闭提示框，仍滞留在当前页面。

九、SweetAlert2定义多个按钮

SweetAlert2也支持定义多个按钮，我们可以在options参数中添加buttons数组，定义多个按钮的类型和文本内容，例如：

Swal.fire({
  title: '要开始倒计时吗？',
  width: 600,
  padding:'3em',
  background: '#fff url(/images/trees.png)',
  backdrop: `
    rgba(0,0,123,0.4)
    url("/images/nyan-cat.gif")
    left top
    no-repeat
  `,
  timerProgressBar: true,
  timer: 5000,
  showCancelButton: true,
  cancelButtonColor: '#6D6D6D',
  cancelButtonText: '取消',
  buttons: [
      '开始',
      '先休息一下'
  ]
}).then((result) => {
        if (result.isConfirmed) {
          Swal.fire({
            title: `开始!`,
            text: `倒计时开始！`,
            timer: 5000,
            timerProgressBar: true,
            icon: 'success',
            background:'#fff',
            
          })
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire({
            title: '休息一下！',
            icon: 'error',
            background:'red',
          })
        }
      })

以上代码定义了两个按钮：“开始”和“先休息一下”，当用户点击开始按钮时，倒计时开始；当用户点击休息按钮时，会弹出一个错误提示框，告知用户先休息一下。

总结

通过本篇文章的讲解，我们对SweetAlert插件的使用有了一定的了解。SweetAlert可以让我们创建更加优美的提醒框，可以让我们自由地定义样式、添加按钮等操作，可以带给用户更好的使用体验。同时，SweetAlert还有很多的拓展和API，使用起来非常方便。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/197550.html