Angular sweetalert2

1. 前言

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

2. 安装 sweetalert2

1
2
3

npm install --save sweetalert2

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

1
2
3

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 主题.

1
2
3

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

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

Angular versionLatest compatible version rangeRequired SweetAlert2 version range
Angular 14+@sweetalert2/ngx-sweetalert2@^12.0.0 (current)sweetalert2@^11.0.0
Angular 12, 13@sweetalert2/ngx-sweetalert2@^11.0.0sweetalert2@^11.0.0
Angular 9 to 11@sweetalert2/ngx-sweetalert2@~9.0.0sweetalert2@^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.0sweetalert2@^8.5.0
Angular 6@sweetalert2/ngx-sweetalert2@^5.1.0sweetalert2@^8.5.0
Angular 5@sweetalert2/ngx-sweetalert2@^5.1.0sweetalert2@^8.5.0
Angular 4@toverux/ngx-sweetalert2@^3.4.0sweetalert2@^7.15.1
Angular 2Try Angular 4 versions requirements, or older versions like @toverux/ngsweetalert2unknown

3. 配置

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

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

4. 使用

使用之前引入 sweetalert2 包

1
import Swal from "sweetalert2";

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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. 一个拥有三个按钮的模态对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
Swal.fire({
title: "Custom animation with Animate.css",
showClass: {
popup: "animate__animated animate__fadeInDown",
},
hideClass: {
popup: "animate__animated animate__fadeOutUp",
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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 官方文档

作者

鹏叔

发布于

2022-10-16

更新于

2024-07-10

许可协议

评论