牛逼！自从用了这个组件，网站逼格提升了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​​获取项目地址~

​最后​

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

进群方式：在下方公众号后台，回复 ​111​ ，按提示操作即可进群。