牛逼！自从用了这个组件，网站逼格提升了N个档次！

大家好,我是前端实验室的大师兄！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~

相信很多人都会吐槽原生态的Alert弹框也太丑了吧！

想必你也受够了单调的Alert弹框，今天就带你试试这款强大又漂亮的弹框插件 SweetAlert

SweetAlert 弹框组件

SweetAlert 是一个 JavaScript 插件，能够完美替代 JavaScript 自带的 alert 弹出框，并且功能强大、设计优美。

安装

NPM 与 Browserify 或 Webpack 等工具相结合是安装 SweetAlert 的推荐方法。

npm install sweetalert --save

然后，只需将其导入到您的应用程序中：

import swal from 'sweetalert';

也可以直接CDN引用

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

简单使用

将文件导入应用程序后，可以调用该函数

swal("Hello world!");

如果传递两个参数，则第一个参数将是模式的标题，第二个是文本。

swal("Here's the title!", "...and here's the text!");

用第三个参数，您可以向警报添加图标！有 4 个预定义：warning error success info

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

如果要在用户执行危险操作之前警告用户，我们可以通过设置更多选项来使警报变得更好：

• icon 可以设置为预定义以显示一个漂亮的警告图标。"warning"
• 设置buttons为true，SweetAlert 除了默认的确认按钮外，还将显示一个取消按钮。buttons:true
• 通过设置dangerMode ，焦点将自动设置在取消按钮而不是确认按钮上，并且确认按钮将为红色而不是蓝色以强调危险动作。dangerMode:true

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

还有更多高级功能小伙伴们自己去探索哦，SweetAlert的功能还是很强大的，UI也好看！

今天的介绍到这里，喜欢的朋友在下方公众号回复20220127获取项目地址~

最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~