有你在真好 的个人博客
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2
阅读:2367 添加日期:2021/3/27 23:20:40 原文链接:https://www.toutiao.com/item/6698325651209847299/

介绍

sweetalert2是一个漂亮的、响应式、可定制的替代JAVASCRIPT原生的弹出框插件。sweetalert2相比sweetalert更加强大,但它不是sweetalert的扩展,它是一个全新的插件,且支持三大流行前端框架React、Vue、Angular。

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

Github和官网

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安装

提供了很多安装方式

  • 使用npm安装
npm install --save sweetalert2
  • 使用cdn
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

注意:如果想要兼容IE11,还得引入polyfill.js

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

模块化用法

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')

示例

  • 最基本的信息弹出框
Swal.fire('基本信息弹框')
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 标题下包含文字
Swal.fire(
 '标题下有文字',
 '标题下的文字?',
 'question'
 )
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 底部文字
Swal.fire({
 type: 'error',
 title: '标题',
 text: '出错啦!',
 footer: '<a href>为什么会出错?</a>'
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 自定义html
Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定义的html<a href="https://wwwbaidu.com">百度一下<a>',
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起来不错',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 自定义弹框的位置
Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 函数回调
Swal.fire({
 title: '确定要删除么?',
 text: "删除后将无法撤销!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '确定',
 cancelButtonText:'取消'
 }).then((result) => {
 if (result.value) {
 Swal.fire(
 '删除成功!',
 '文件已被删除',
 'success'
 )
 }
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 自定义图片,禁止动画
Swal.fire({
 title: '标题',
 text: '自定义图片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 自定义宽度、边框和背景
Swal.fire({
 title: '自定义宽度、边框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 自定义关闭(自动关闭)
let timerInterval
Swal.fire({
 title: '自动关闭的弹框!',
 html: '我会在<strong></strong> 秒后关闭.',
 timer: 2000,
 onBeforeOpen: () => {
 Swal.showLoading()
 timerInterval = setInterval(() => {
 Swal.getContent().querySelector('strong')
 .textContent = Swal.getTimerLeft()
 }, 100)
 },
 onClose: () => {
 clearInterval(timerInterval)
 }
}).then((result) => {
 if (
 // Read more about handling dismissals
 result.dismiss === Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 异步提交
Swal.fire({
 title: '提交用户名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login) => {
 return fetch(`//api.github.com/users/${login}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error => {
 Swal.showValidationMessage(
 `请求出错: ${error}`
 )
 })
 },
 allowOutsideClick: () => !Swal.isLoading()
 }).then((result) => {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

  • 三步曲
Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '问题1',
 text: '使用modal很简单?'
 },
 '问题2',
 '问题3'
 ]).then((result) => {
 if (result.value) {
 Swal.fire({
 title: '所有问题回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

这里就简单介绍这些示例,更多示例详见官方文档

弹框类型

  • success
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2


  • error
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2


  • warning
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2


  • info
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2


  • question
一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

相关项目

  • ngx-sweetalert2 - Angular 4+集成

https://github.com/sweetalert2/ngx-sweetalert2

  • sweetalert2-react-content - React集成

https://github.com/sweetalert2/sweetalert2-react-content

  • sweetalert2-webpack-demo - webpack demo

https://github.com/sweetalert2/sweetalert2-webpack-demo

  • sweetalert2-parcel-demo - parcel demo

https://github.com/sweetalert2/sweetalert2-parcel-demo

  • Vue.js集成(社区维护)

https://github.com/avil13/vue-sweetalert2

  • Laravel 5 Package(社区维护)

https://github.com/realrashid/sweet-alert

浏览器兼容性

一个零依赖的漂亮的JavaScript弹框插件——sweetalert2

总结

sweetalert2是原本sweetalert的升级版,功能更加强大,文档更加全面,写法更加先进,是Web开发中常用的插件,当然同样优秀的还有很多,比如国产的layer.js也很好用,选择一个适合自己的就成,今天的介绍就到这里,希望能对你有所帮助,如果还有更好的推荐,欢迎到评论区留言,谢谢!

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号