介绍

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

自定义图片，禁止动画

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!'
        })
    }
})