迹忆客 专注技术分享

好长时间没有更新文章了，年底工作比较忙，确实是没有时间来写文章。今天忙里偷闲，总结了一款前端提示框的插件——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所有参数及其所标识的功能的介绍。灵活运用各个参数，能使我们的网页效果更加丰富。