Sweetalert详细介绍
好长时间没有更新文章了，年底工作比较忙，确实是没有时间来写文章。今天忙里偷闲，总结了一款前端提示框的插件——sweetalert——推荐给大家。
点击查看演示
Sweetalert安装
Sweetalert官方为我们提供了三种安装方式：
方法一 通过bower安装
$ bower install sweetalert
方法二 通过npm安装
$ npm install sweetalert
这里需要注意的是npm安装的时候不要将sweetalert安装为本项目依赖，要把其安装到全局中
方法三 直接下载css文件和javascript文件
下载文件
安装完成以后我们需要在项目中引入sweetalert.css和sweetalert.min.js两个文件。这两个文件分别位于dist/css 和 dist/js文件夹中。
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
引入文件以后，下面我们看一下调用方法（sweetalert为我们提供了两个方法名——sweetalert和swal）
swal({
title: "Success!",
text: "Here's my success message!",
type: "success",
confirmButtonText: "Cool"
});
Sweetalert使用介绍
sweetalert使用方法可以认为有以下两种形式
swal({
title: "Success!",
text: "Here's my success message!",
type: "success"
});
和
swal(“Success!”,”Here’s my success message!”,”success”);
其实以上两种形式展现的样式是相同的。只是当提示信息所需要的功能简单，仅仅只需要提示信息时我们可以使用后者较为简单的形式。当稍微复杂的时候我们就需要使用前者较复杂的形式了。
Sweetalert参数及方法介绍
下面我们就sweetalert为我们提供的参数及参数对应的功能分别做一个简单的介绍。
title 必须参数 默认为null
该参数是对话框的标题。它可以作为json对象的键名也可以作为swal方法的第一个参数
swal(“这是title”)
或者
swal({
title:”这是title”
});
查看演示
text 默认为null
该参数是对对话框的描述。同title一样，它不仅可以作为json对象的键名也可以作为swal方法的第二个参数
swal(“这是title”,”这是text”);
或者
swal({
title:”这是title”,
text:”这是text”
})
查看演示
type 默认为null
该参数设定了对话框的消息类型，sweetalert内置了四种类型，分别是”warning”（警告）、”info”（提示）、”success”（成功）和”error”（错误）。除了这四种之外用户还可以将该类型设为”input”使其成为可以交互的对话框。
同title和text一样，该参数可以作为json对象的键名，也可以作为swal方法的第三个参数。
swal(“这是title”,”这是text”,”success”);
或者
swal({
title:”这是title”,
text:”这是text”,
type:”success”
});
查看演示
confirmButtonText、cancelButtonText、showCancelButton和showConfirmButton
confirmButtonText 默认为”OK”，cancelButtonText默认为”Cancel”。我们可以通过修改这两个参数的值来修改其显示的文本。
showCancelButton默认为false，也就是说默认情况下取消按钮是不显示的，所以说cancelButtonText使用的前提是showCancelButton设为true。
swal({
title:”这是title”,
text:”这是text”,
type:”success”,
showCancelButton:true,
confirmButtonText:”确定”,
cancelButtonText:”取消”
});
查看演示
showConfirmButton这就很好理解了，其默认为true。也就是说确定按钮是默认显示的，如果不显示的话可以将其设为false。
查看演示
closeOnConfirm 和 closeOnCancel 。他们表示当点击确认或者取消的时候是否关闭对话框。true关闭，false则不关闭。默认情况下为true，是关闭的。如果我们想将其设为不关闭，可以将其设置为false。但是，只将其设为false是不够的，还需要指定第二个参数的回调函数。
swal({
title:”这是title”,
text:”这是text”,
type:”success”,
showCancelButton:true,
confirmButtonText:”确定”,
cancelButtonText:”取消”,
closeOnConfirm:false,
closeOnCancel:false,
},function(isConfirm){
If(isConfirm){
swal(‘成功’);
}else{
swal(‘取消’);
}
});
查看演示
html 默认为false。如果设置为true，则会解析title和text中的html标签
swal({
title:"HTML <small>Title</small>！",
text:"自定义<span style='color:#f8bb86;'>html</span>内容！",
html:true
});
查看演示
timer 默认为null，该参数是用来设定对话框自动关闭的。以ms为单位
swal({
title:"自动关闭提示框！",
text:"设置2秒后自动关闭！",
timer:2000,
showConfirmButton:false
});
查看演示
inputType、inputPlaceholder和inputValue 这三个前提都是type设为input才有效。
inputType指定输入框类型，默认为text。
swal({
title:"输入框",
text:"在输入框中输入一些信息吧！",
type:'input',
showCancelButton:true,
closeOnConfirm:false,
inputPlaceholder:"输入信息"
},
function(inputValue){
if(inputValue === false) return false;
if(inputValue === ''){
swal.showInputError("内容不能为空，请输入一些信息！")
return false;
}
swal("Good!", "您输入的是: " + inputValue, "success");
});
查看演示
imageUrl和imageSize ，这两个参数和自定义对话框的图标有关。
imageUrl指定图标的地址。默认为null。
imageSize指定图标的大小，当imageUrl指定了图标地址该参数才有效。默认大小为80x80。该参数指定的值用x分割，第一个是宽度（width），第二个是高度（height）
swal({
title:"Sweet！",
text:"这是自定义的图标！",
imageUrl:'Images/thumbs-up.jpg',
imageSize:’90x90’
});
查看演示
animation表示的是对话框显示时的动画。默认动画是pop（淡出），也可以指定slide-from-top（从上面滑入）和slide-from-bottom（从下面滑入）。如果设为false则没有动画。
swal({
title:"Animation 动画",
text:"我是从上面掉下来的！",
type:'info',
animation:"slide-from-top",
});
查看演示
showLoaderOnConfirm 默认为false。当该参数设为true的时候会禁用按钮，并且显示正在加载的图标。常用的情形是当用户点击了确认按钮以后会提交ajax，这时在ajax提交的过程中禁用按钮，并且显示正在加载。除此之外在这期间还不能关闭对话框。下面是模拟ajax请求过程。
swal({
title:"Ajax 使用示例！",
text:"提交ajax请求！",
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},function(){
setTimeout(function(){
swal("Ajax 请求完成！");
}, 2000);
});
查看演示
allowOutsideClick 默认为false，如果设为true，则用户点击对话框以外的区域关闭对话框。
swal({
title:"AllowOutsideClick",
text:"不用点击我了，点击我以外的区域我也会消失的！",
type:'info',
allowOutsideClick:true,
showConfirmButton:false
});
查看演示
allowEscapeKey 默认为false，如果设为true，则用户按键盘上的esc键即可关闭对话框。
swal({
title:"allowEscapeKey",
text:"不用点击我了，按下键盘上的ESC键我就消失了！",
type:'info',
allowEscapeKey:true,
showConfirmButton:false
});
查看演示
以上是对sweetalert所有参数及其所标识的功能的介绍。灵活运用各个参数，能使我们的网页效果更加丰富。
本文转载自：迹忆客（https://www.jiyik.com）
以上是 Sweetalert详细介绍 的全部内容， 来源链接： utcz.com/z/290133.html
