Angular sweetalert2

1. 前言

在本教程中，我们将学习如何在 angular 14 应用程序中使用 sweetalert2 来显示 sweetalert 弹出消息。

2. 安装 sweetalert2

npm install --save sweetalert2

如果是在 Angular 框架中使用 sweetalert2, 建议安装

npm install --save sweetalert2 @sweetalert2/ngx-sweetalert2

安装 sweetalert2 主题, 有多种主题可供选择, 分别是 theme-dark, theme-bulma, theme-bootstrap-4, theme-minimal, theme-borderless, theme-wordpress-admin, theme-default 等. 我的应用中使用的是 material 风格, 所以此处需安装@sweetalert2/theme-material-ui 主题.

npm install --save @sweetalert2/theme-material-ui

对于如何选择相应的版本, 请参考下表

Angular version	Latest compatible version range	Required SweetAlert2 version range
Angular 14+	@sweetalert2/ngx-sweetalert2@^12.0.0 (current)	sweetalert2@^11.0.0
Angular 12, 13	@sweetalert2/ngx-sweetalert2@^11.0.0	sweetalert2@^11.0.0
Angular 9 to 11	@sweetalert2/ngx-sweetalert2@~9.0.0	sweetalert2@^10.8.0
Angular 8	@sweetalert2/ngx-sweetalert2@~7.3.0 (⚠️ NOT ~7.4.0, broken AoT metadata)	sweetalert2@^9.7.0
Angular 7	@sweetalert2/ngx-sweetalert2@^5.1.0	sweetalert2@^8.5.0
Angular 6	@sweetalert2/ngx-sweetalert2@^5.1.0	sweetalert2@^8.5.0
Angular 5	@sweetalert2/ngx-sweetalert2@^5.1.0	sweetalert2@^8.5.0
Angular 4	@toverux/ngx-sweetalert2@^3.4.0	sweetalert2@^7.15.1
Angular 2	Try Angular 4 versions requirements, or older versions like @toverux/ngsweetalert2	unknown

3. 配置

在 src/styles.scss 中引入主题样式

@import "@sweetalert2/theme-material-ui/material-ui.scss";

4. 使用

使用之前引入 sweetalert2 包

import Swal from "sweetalert2";

4.1. 一个最简单的模态对话框

Swal.fire("Any fool can use a computer");

4.2. 一个拥有标题文本以及图标的模态对话框

Swal.fire(
  "The Internet?", // 标题
  "That thing is still around?", // 文本内容
  "question" //图标
);

默认支持五种图标, 分别是: warning, error, success, info 和 question

4.3. 一个拥有标题,文本,图标以及 footer 的模态对话框

Swal.fire({
  icon: "error",
  title: "Oops...",
  text: "Something went wrong!",
  footer: '<a href="">Why do I have this issue?</a>',
});

4.4. 一个拥有自定义 HTML 描述和自定义按钮和 ARIA 标签的模态对话框

Swal.fire({
  title: "<strong>HTML <u>example</u></strong>",
  icon: "info",
  html:
    "You can use <b>bold text</b>, " +
    '<a href="//sweetalert2.github.io">links</a> ' +
    "and other HTML tags",
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: "Thumbs up, great!",
  cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: "Thumbs down",
});

4.5. 一个拥有三个按钮的模态对话框

Swal.fire({
  title: "Do you want to save the changes?",
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: "Save",
  denyButtonText: `Don't save`,
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
  if (result.isConfirmed) {
    Swal.fire("Saved!", "", "success");
  } else if (result.isDenied) {
    Swal.fire("Changes are not saved", "", "info");
  }
});

4.6. 一个带动效的模态对话框

动效采用 animate 库https://cdn.jsdelivr.net/npm/animate.css@4/animate.min.css

Swal.fire({
  title: "Custom animation with Animate.css",
  showClass: {
    popup: "animate__animated animate__fadeInDown",
  },
  hideClass: {
    popup: "animate__animated animate__fadeOutUp",
  },
});

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

5. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

6. 参考文档

@sweetalert2/ngx-sweetalert2 github repo

sweetalert2 官方文档