这样逼格满满的弹出框消息提示你不心动吗？

可能你注意到在一些网站上有下面这个特别酷炫的弹出框，用户体验来说感觉很有层次动态感，比静态的模态弹出框/消息提示更能吸引人注意，给人一种醒目，很酷的感觉!

这里使用的就是SweetAlert2库。

0x01 简介

SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框，支持响应式布局。现在还支持toast消息提示框，输入表单验证等。它是jsDelivr排名上第23名的最受欢迎的包。

0x02 安装

可以通过yarn或npm来安装sweetalert2对话框插件。

npm install --save sweetalert2
yarn add sweetalert2

0x03 用法

html直接引入方式：

<script src="sweetalert2.all.min.js"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

采用es6方式引入使用：

import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')

然后直接输入以下代码即可看到上图的效果：

Swal.fire({
  title: 'Good Job!',
  text: 'Keep moving forward',
  icon: 'success',
  confirmButtonText: 'Ok'
})

ox04 vue中如何使用

已经有现成的轮子写好了对应的vue版的sweetalert2 ，名称为: vue-sweetalert2. 可搜索查看该包相详细使用说明。这里简单介绍下常用用法。

//  vue-cli使用方法
// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

const options = {
  confirmButtonColor: '#41b882',
  cancelButtonColor: '#ff7674',
};

Vue.use(VueSweetalert2, options);

//  vue-nuxt使用方法
// 1. npm包导入
 "vue-sweetalert2": "^3.0.6",
// 2. nuxt.config.js中引入默认配置
  modules: [
      [
      'vue-sweetalert2/nuxt',
      {
        confirmButtonColor: '#41b882',
        cancelButtonColor: '#ff7674'
      }
    ]
 ]

注意： 在nuxt集成中，默认的this.$swal引入的是 sweetalert2的 swal.fire方法，而非swal实例。

1. 弹出一个成功，警告或者信息提示框，写法如下：

// 写法一
this.$swal('成功', '成绩获取成功!', 'success')
// 写法二
this.$swal({
        icon: 'success',
        text: '最新数据更新成功!'，
        confirmButtonText: '好的'
      })
2. 弹出一个消息提示，不是弹出框
this.$swal({
        icon: 'success',
        position: 'top-right',
        toast: true,
        timer: 3000,
        timerProgressBar: true,
        title: '数据更新完成!',
        showConfirmButton: false,
        allowOutsideClick: true,
        allowEscapeKey: true，
         onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })

3. 回调手动显示和关闭弹出框

this.$swal({}).then((res) => {
        console.log(res)
      })
// 对应的res返回的是一个对象，包含如下信息:
dismiss: "timer"
isConfirmed: false
isDismissed: true
value: ''
```

可以通过以上属性获取弹出框消失类型或者是否是关闭或者确认按钮响应的。其中dismiss是个字符串来代表
关闭的类型: module:sweetalert2.Swal.DismissReason 可选值为：
 cancel, backdrop, close, esc, timer

## 4. 图标自定义

```      
({
 title:'成功登录!',
 showCancelButton: false,
 closeOnConfirm: false,
 imageUrl: 'https://unsplash.it/400/200',
  imageWidth: 200,
  imageHeight: 200,
  animation: false
}）
```
还有更多其他好玩的用法，可以到仓库中查看相关详细文档。

中文文档： http://mishengqiang.com/sweetalert2/
英文文档： https://sweetalert2.github.i