说明

  • 官方网址:https://sweetalert.js.org/guides/
  • 插件版本:2.0.1
  • 文档汉化:Joey Yan
  • 汉化说明:本人英语能力有限,如有不正确的地方欢迎在下方评论留言,或直接在线与我联系。

安装

NPM/Yarn

官网推荐的安装方法,使用命令行工具npmYarn来安装SweetAlert

npm install sweetalert --save

然后,只需使用以下代码即可将其导入到您的应用程序:

import swal from 'sweetalert';

CDN

您还可以在unpkg和jsDelivr网站上上找到SweetAlert的CDN服务,直接引用并使用全局变量swal

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

开始使用

显示一个基本弹窗

将文件导入应用程序后,可以调用swal函数(请确保在DOM加载后再调用它!)来生成一个弹窗,参数为弹窗显示的内容,首先让我们从Hello world!开始

swal("Hello world!");

如果传递两个参数,那么第一个参数将是弹窗的标题,第二个参数是弹窗显示的文本。

swal('这是一个标题!', '...这是弹窗显示的文本!');

添加第三个参数,您就可以在弹窗中添加一个动态图标!一共有4个预定义好的参数:"warning""error""success""info"。分别表示“警告”、“错误”、“成功”和“信息”。

swal('干得漂亮!', '你点击了这个按钮!','success');

选项配置

除了如上一步中快速生成一个弹窗外,也可以使用一个JSON对象作为唯一参数重写弹窗参数的方式来生成一个弹窗,如上一个示例中,如果使用参数重写方法,则代码为:

swal({
  title: "干得漂亮!",
  text: "你点击了这个按钮!",
  icon: "success",
});

使用这种方式生成弹窗,我们可以指定更多的选项来自定义弹窗。例如,我们可以将弹窗的确认按钮的文本改为"没错!"

swal({
  title: "干得漂亮!",
  text: "你点击了这个按钮!",
  icon: "success",
  button: "没错!",
});

你也可以将基本写法与选项配置结合着使用,这样做可以为您节省一些写代码的时间:

swal("干得漂亮!", "你点击了这个按钮!", "success", {
  button: "没错!",
});

获取交互状态

SweetAlert使用promises对象来跟踪用户如何与弹窗交互。如果用户单击确认按钮,则promise将返回true。如果弹窗被关闭(通过单击它外部),则promise将返回null

swal("请单击按钮或弹窗的外部来关闭弹窗。")
.then((value) => {
  swal(`返回的值为: ${value}`);
});

如果您想在执行关键操作之前警告用户,获取交互状态就可以派上用场。通过设置更多选项,我们还可以让弹窗变得更完善。

  • 通过将icon参数设置为预定义的"warning",以显示一个漂亮的警告图标。
  • 通过将buttons(复数)参数设置为true,SweetAlert除了显示默认的确认按钮之外,还将显示一个取消按钮。
  • 通过将dangerMode参数设置为true,焦点将会自动设置在取消按钮而不是确认按钮上,并且确认按钮将会从默认的蓝色变为红色,以强调这是一个关键的操作。
swal({
  title: "操作确认",
  text: "删除后,您将无法恢复此虚拟文件!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("噗!您的虚拟文件已被删除!", {
      icon: "success",
    });
  } else {
    swal("你的虚拟文件是安全的!");
  }
});

正文结束
本文作者:

文章标题:SweetAlert弹窗插件中文API(一):快速入门

本文地址:https://www.yanjiayu.cn/js/sweetalertfaststart.html

版权说明:本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
知识共享许可协议
最后修改:2021 年 02 月 01 日 11 : 27 AM
如果觉得我的文章对你有用,请随意赞赏