1.直接运用sweetalert2
<style>
.title-class {
color: #fff;
font-weight: 200;
}
</style>
<script src="./js/sweetalert2.all.min.js"></script>
<button class="btn2">点我看动画哦</button>
<script>
$btn2 = document.querySelector(".btn2");
$btn2.onclick = function () {
Swal.fire({
position: "bottom-end", // 出现位置,右下角
title: "您暂时没有权限登录... 即将为您跳转回到登录页...",
showConfirmButton: false, // 不显示确认按钮
background: "#F4506B",
toast: true, // toast为false的话是弹窗形式弹出,有遮罩层。默认为false
width: "300px",
padding: "10px",
icon: "error",
iconColor: "#fff",
// animation: false, // 弹出的动画
customClass: {
title: "title-class", // 自定义样式
},
});
};
</script>
在页面中的样子:
2.angular中运用sweetalert2
(1)先安装: npm install sweetalert2
(2)在ts中引入:
(3)运用:
Swal.fire({
... // 写属性就可以
});
官方网站: https://www.sweetalert2.cn/.