1.SweetAlert2
1.1快速部署
国内SweetAlert2cdn
https://www.bootcdn.cn/limonte-sweetalert2/
SweetAlert部署文件
https://pan.baidu.com/s/1BFXctrsgE_26HJU3XT1lcg
1.2SweetAlert2官方文档
https://sweetalert2.github.io/#examples
1.3一.前言
SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框，功能非常强大。
官方文档: https://sweetalert2.github.io/
1.4基本使用
1.对话框
(1) 基础对话框
Swal('hello world')
(2)或者多参数设置对话框
swal({ title: '提示', text: "早上好", confirmButtonText: '确认', confirmButtonColor: 'Green', })
(3)右上角通知类弹窗
Swal.fire({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, type: 'success', title: 'Signed in successfully' })
(4)自定义 第三方 css 的 弹框 (推荐使用 Animate.css )
Swal.fire({ title: 'Custom animation with Animate.css', animation: false, customClass: 'animated tada' }) (5)带有定位和消失时间的弹框
Swal.fire({ position: 'top-end', //定位 左上角 type: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 }) (6)2.带有展示标签内容的弹框
var content = "无记录"; var msg=""; //msg 是从外面传入的数据 if (msg) { content = "<p style='color: red'>最近一次操作后的5小时内有效</p> " + "<p>可以使用 Ctrl +F 查找关键字</p>" + "<table class='table_list'>" + "<tr>" + " <th class='js_tr_data'> 时间</th> <th>名称</th> <th>密码</th>" + "</tr>" + msg + "</table>" } Swal.fire({ title: '<strong>记录</strong>', type: 'info', html: content, // HTML focusConfirm: true, //聚焦到确定按钮 showCloseButton: true,//右上角关闭 })
2.弹出一个带情景模式的对话框
(1)可以在的第三个参数中设置
Swal( '标题', '内容', 'question' )
(2)同时也可以通过下面的方法来处理对话框的用户交互：
swal({ title: '确定?', text: '您将无法恢复此文件!', type: '警告', showCancelButton: true, confirmButtonText: '确定,删除', cancelButtonText: '取消', }).then(function(isConfirm) { if (isConfirm.value) { swal( '已删除!', '文件已删除', 'success' ); } });
(3)自定义html对话框内容
swal({ title: '<h2 style="font-weight:bold;color:red">温馨提示</h2>', type: 'info', html: '<a href="http://www.baidu.com" style="color:green">自定义的html内容</a>', showCloseButton: true, showCancelButton: true, confirmButtonColor: 'gray', cancelButtonColor: '#3fc3ee', confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消', cancelButtonText: ' <i class="mui-icon mui-icon-trash"></i>确认' })
3.定时关闭对话框
3秒后自动关闭对话框
swal({ title: "自动关闭", text: "将在三秒钟自动关闭该对话框？", showConfirmButton: false, timer: 3000 })
4.输入框
(1) input 类型
swal({ title: "请输入您的姓名", input: 'text', confirmButtonText: '确定', confirmButtonColor: '#4cd964' }).then(function(result) { if(result) { swal({ title: '结果', text: result, confirmButtonText: '确定', confirmButtonColor: '#4cd964' }); } });
(2) textarea类型
swal({ input: 'textarea', confirmButtonText: '确定', confirmButtonColor: '#4cd964' }).then(function(result) { if(result) { swal({ title: '结果通知', text: result, confirmButtonText: '确定', confirmButtonColor: '#4cd964' }); } });
5.如何做一个自己的通用模版
//定义模版 (可多次使用) var MyBox = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); //调用 MyBox.fire({ type: 'success', title: 'successfully' });
1.5模态对话框的类型
sweetalert2提供了5种情景模式的对话框:
配置参数
| 参数 | 默认值 | 描述 |
| 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可以工作在所有的现代浏览器中：
- IE: 10+（需要引入Promise文件）
- Microsoft Edge: 12+
- Safari: 4+
- Firefox: 4+
- Chrome 14+
- Opera: 15+