sweetalert2使用教程

背景：

项目的开发中经常会遇到弹窗的问题，但是我们用到的弹窗都特别low，而且网上找了一下，发现easy-ui以及layer对应的弹窗都不是我想要的，后来发现sweetalert，发现评论还不错，所以个人尝试一下，并记录一下使用过程，便于他人借鉴。

SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。

SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框。

使用方法：

使用sweetalert对话框需要引入对应的js和css（如 sweetalert2.min.css 和 sweetalert2.min.js），因为里面的promise属性不支持ie11，所以也需要引入promise.min.js文件，而且改js必须依托jQuery，所以需要引入jquery.min.js。如下图：

<link rel="stylesheet" href="sweetalert/sweetalert2.min.css" />
<script type="text/javascript" src="jquery3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="sweetalert/es6-promise.auto.js"></script>
<script type="text/javascript" src="sweetalert/sweetalert2.min.js"></script>

但是在网上下载的时候发现要不就是需要csdn积分，要不下载的就不能用，所以此处提供一个下载的链接：

1	`https://www.bootcdn.cn/limonte-sweetalert2/`

首先创建2个文件，一个是css文件，一个js文件，然后打开这个网站之后，找到自己想要版本的css和js，然后打开对应的链接，复制里面内容分别粘贴到自己创建的文件中即可使用，以测试。

基本用法：

最基本的使用方法是通过swal()来弹出一个对话框。

1	`swal("Hello world!");`

如果要弹出一个带情景模式的对话框，可以在的第二个参数中设置。

1	`swal("Good job!", "You clicked the button!", "success");`

配置参数：

参数	默认值	描述
title	null	模态对话框的标题。它可以在参数对象的`title`参数中设置，也可以在`swal()`方法的第一个参数设置。
text	null	模态对话框的内容。它可以在参数对象的`text`参数中设置，也可以在`swal()`方法的第二个参数设置。
html	null	对话框中的内容作为HTML标签。如果同时提供`text`和`html`参数，插件将会优先使用`text`参数。
type	null	对话框的情景类型。有5种内置的情景类型：`warning`，`error`，`success`，`info`和`question`。它可以在参数对象的`type`参数中设置，也可以在`swal()`方法的第三个参数设置。
customClass	null	模态对话框的自定义class类。
animation	true	如果设置为false，对话框将不会有动画效果。
allowOutsideClick	true	是否允许点击对话框外部来关闭对话框。
allowEscapeKey	true	是否允许按下Esc键来关闭对话框。
showConfirmButton	true	是否显示“Confirm（确认）”按钮。
showCancelButton	false	是否显示“Cancel（取消）”按钮。
confirmButtonText	"OK"	确认按钮上的文本。
cancelButtonText	"Cancel"	取消按钮上的文本。
confirmButtonColor	"#3085d6"	确认按钮的颜色。必须是HEX颜色值。
cancelButtonColor	"#aaa"	取消按钮的颜色。必须是HEX颜色值。
confirmButtonClass	null	确认按钮的自定义class类。
cancelButtonClass	null	取消按钮的自定义class类。
buttonsStyling	true	为按钮添加默认的swal2样式。如果你想使用自己的按钮样式，可以将该参数设置为false。
reverseButtons	false	如果你想反向显示按钮的位置，设置该参数为true。
showLoaderOnConfirm	false	设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况。
preConfirm	null	在确认之前执行的函数，返回一个Promise对象。
imageUrl	null	为模态对话框自定义图片。指向一幅图片的URL地址。
imageWidth	null	如果设置了`imageUrl`参数，可以为图片设置显示的宽度，单位像素。
imageHeight	null	如果设置了`imageUrl`参数，可以为图片设置显示的高度，单位像素。
imageClass	null	自定义的图片class类。
timer	null	自动关闭对话框的定时器，单位毫秒。
width	500	模态窗口的宽度，包括padding值（`box-sizing: border-box`）。
padding	20	模态窗口的padding内边距。
background	"#fff"	模态窗口的背景颜色。
input	null	表单input域的类型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。
inputPlaceholder	""	input域的占位符。
inputValue	""	input域的初始值。
inputOptions	{} 或 Promise	如果`input`的值是`select`或`radio`，你可以为它们提供选项。对象的key代表选项的值，value代表选项的文本值。
inputAutoTrim	true	是否自动清除返回字符串前后两端的空白。
inputValidator	null	是否对input域进行校验，返回Promise对象。
inputClass	null	自定义input域的class类。
参数	默认值	描述

方法：

方法	描述
swal.setDefaults({Object})	当你在使用SweetAlert2时有大量的自定义参数，可以通过`swal.setDefaults({Object})`方法来将它们设置为默认参数。
swal.resetDefaults()	重置设置的默认值。
swal.queue([Array])	提供一个数组形式的SweetAlert2参数，用于显示多个对话框。对话框将会一个接一个的出现。
swal.close() 或 swal.closeModal()	以编程的方式关闭当前打开的SweetAlert2对话框。
swal.enableButtons()	确认和关闭按钮可用。
swal.disableButtons()	禁用确认和关闭按钮。
swal.enableLoading() 或 swal.showLoading()	禁用按钮并显示加载进度条。通常用于AJAX请求。
swal.disableLoading() 或 swal.hideLoading()	隐藏进度条并使按钮可用。
swal.clickConfirm()	以编程的方式点击确认按钮。
swal.clickCancel()	以编程的方式点击取消按钮。
swal.showValidationError(error)	显示表单校验错误信息。
swal.resetValidationError()	隐藏表单校验错误信息。
swal.enableInput()	使input域可用。
swal.disableInput()	禁用input域。
方法	描述

sweetalert2使用教程相关推荐

sweetalert2中ajax用法,SweetAlert2 使用教程
SweetAlert2是一款功能强大的纯Js模态消息对话框插件.SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类, ...
使用html() undefined_SweetAlert2使用教程
SweetAlert2是一款功能强大的纯Js模态消息对话框插件.SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类, ...
SweetAlert2网页弹窗---JAVASCRIPT弹窗
一个漂亮的.响应式的.可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗,无任何依赖中文文档地址:http://mishengqiang.com/sweetalert2/ 文档地址:ht ...
js插件---弹出层sweetalert2
一.总结 sweetalert2的窗口美观,移动端适配也比较好,易学易用,是一款简单便捷的组件,值得学习! SweetAlert2和SweetAlert的区别? SweetAlert2是SweetAl ...
SweetAlert入门教程
SweetAlert入门教程前些天在做后台管理系统,在用户交互这块(弹窗.提示相关),用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义,支持设置提示框标题.提示类型.确认取消 ...
使用Docker搭建svn服务器教程
使用Docker搭建svn服务器教程 svn简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很 ...
mysql修改校对集_MySQL 教程之校对集问题
本篇文章主要给大家介绍mysql中的校对集问题,希望对需要的朋友有所帮助! 推荐参考教程:<mysql教程> 校对集问题校对集,其实就是数据的比较方式. 校对集,共有三种,分别为:_bi ...
mysql备份psb文件怎么打开_Navicat for MySQL 数据备份教程
原标题:Navicat for MySQL 数据备份教程一个安全和可靠的服务器与定期运行备份有密切的关系,因为错误有可能随时发生,由攻击.硬件故障.人为错误.电力中断等都会照成数据丢失.备份功能为防 ...
php rabbmq教程_RabbitMQ+PHP 教程一（Hello World）
介绍 RabbitMQ是一个消息代理器:它接受和转发消息.你可以把它当作一个邮局:当你把邮件放在信箱里时,你可以肯定邮差先生最终会把邮件送到你的收件人那里.在这个比喻中,RabbitMQ就是这里的邮箱 ...
【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）
置顶本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下你是否曾经在租房时因 ...

sweetalert2使用教程

sweetalert2使用教程相关推荐

最新文章

热门文章