sweetalert弹窗组件的简单使用

最新推荐文章于 2024-11-22 10:24:13 发布

simon-_-

最新推荐文章于 2024-11-22 10:24:13 发布

阅读量1.3k

点赞数 2

分类专栏： SweetAlert 文章标签： sweetalert 弹窗

本文链接：https://blog.csdn.net/qq_38738510/article/details/102502482

版权

SweetAlert 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

最近发现一个特别漂亮和好用的前端弹窗组件sweetalert，它能替代jQuery原生的丑陋的alert弹窗

正文

官网地址

https://sweetalert.js.org/

安装

1.NPM/Yarn
建议将NPM与Browserify或Webpack之类的工具结合使用，这是安装SweetAlert的推荐方法

npm install sweetalert --save

然后，只需将其导入您的应用程序即可：

import swal from ‘sweetalert’;

2.BootCDN
使用BootCDN的加速服务直接引入

'<'link href=“https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css” rel=“stylesheet”>
’ <'script src=“https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js”> ‘<’/script>

使用

sweetalert的弹窗大致可以分为四种，不同的图标代表不同弹窗，有下面四种图标

1.“warning” 警告弹窗，一般删除重要数据时使用
2.“error” //错误弹窗，取消操作时使用
3.“success” 成功弹窗，操作成功使用
4.“info” 提示弹窗

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
	</head>
	<body>
		<script  type="text/javascript">
				function warningTest(){
					swal(  
						{
						title:"您确定要删除这条信息吗",  
						text:"删除后将无法恢复，请谨慎操作！",  
						type:"warning",  
						showCancelButton:true,  
						confirmButtonColor:"#DD6B55",  
						confirmButtonText:"是的，我要删除！",  
						cancelButtonText:"让我再考虑一下…",  
						closeOnConfirm:false,  
						closeOnCancel:false  
						},  
						function(isConfirm)  
						{  
							if(isConfirm){
								swal({title:"删除成功！", text:"您已经删除了这条信息。", type:"success" });
							}  
							else{  
								swal({title:"已取消", text:"您取消了删除操作！", type:"error"})  
							} 
						}  
				   )
				}
				function infoTest(){
					swal("Good job!", "You clicked the button!", "info");
				}
			</script>
	<button onclick="warningTest()">警告弹窗</button>
	<button onclick="infoTest()">提示信息</button>
	</body>
</html>