【亲测免费】 SweetAlert 使用教程

项目介绍

SweetAlert 是一个用于替换 JavaScript 默认 alert 的库，提供了更加美观和可定制的弹窗效果。它能够自动居中显示，并且无论是在桌面、移动还是平板设备上都能保持良好的显示效果。SweetAlert 支持多种内置类型（如警告、错误、成功等），并且高度可定制。

项目快速启动

安装

你可以通过 npm 或 yarn 安装 SweetAlert：

npm install sweetalert --save

或者使用 CDN：

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

基本使用

在你的项目中引入 SweetAlert 后，可以调用 swal 函数来显示一个弹窗：

import swal from 'sweetalert';

swal("Hello world!");

如果传递两个参数，第一个参数将是弹窗的标题，第二个参数是其内容：

swal("提示", "这是一个 SweetAlert 弹窗");

应用案例和最佳实践

基本消息

swal("这是一个基本消息");

带有标题和文本的消息

swal("标题", "这是一个带有标题和文本的消息");

警告消息

swal({
  title: "警告",
  text: "这是一个警告消息",
  icon: "warning",
  dangerMode: true
});

确认对话框

swal({
  title: "确认删除？",
  text: "删除后将无法恢复！",
  icon: "warning",
  buttons: true,
  dangerMode: true
})
.then((willDelete) => {
  if (willDelete) {
    swal("删除成功！", {
      icon: "success",
    });
  } else {
    swal("删除取消！");
  }
});

典型生态项目

SweetAlert 可以与许多其他前端库和框架结合使用，例如：

• React: 可以使用 sweetalert-react 包来集成 SweetAlert。
• Vue.js: 可以使用 vue-sweetalert-directive 来在 Vue 项目中使用 SweetAlert。
• Angular: 可以使用 angular-sweetalert 包来在 Angular 项目中使用 SweetAlert。

这些生态项目扩展了 SweetAlert 的功能，使其更加适合在不同的前端框架中使用。