這樣逼格滿滿的彈出框消息提示你不心動嗎？

可能你注意到在一些網站上有下面這個特別酷炫的彈出框，用戶體驗來說感覺很有層次動態感，比靜態的模態彈出框/消息提示更能吸引人注意，給人一種醒目，很酷的感覺!

這里使用的就是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