在 Vue 使用 SweetAlert2

本文假設你已經裝好 Vue 以及 Webpack 等設定。
首先需要安裝 sweetalert2:

npm i sweetalert2 --save-dev

在主要的程式進入點,例如: main.js (看個人摟) 做 import:

import swal from 'sweetalert2'

接著在下方定義 swalPlugin
另外把 sweetalert2 的設定指回去給 Vue.prototype.$swal
你也可以定義別的名稱,例如 Vue.prototype.$sweetalert2 之類的。

const swalPlugin = {}

swalPlugin.install = function(Vue){

 swal.setDefaults({

  confirmButtonClass: 'btn btn-primary',

  cancelButtonClass: 'btn btn-default',

  buttonsStyling: false,

  showCloseButton: true
 });

 Vue.prototype.$swal = swal;
}

Vue.use(swalPlugin)

setDefaults 這些設定可不是空穴來風,他只是用來設定一些全站使用 sweetalert 預設的參數,(sweetalert 官網有寫,當然在此範例裡,你也可以都不要有任何設定。)

使用 Vue.use 完成註冊之後,接下來你就可以在整個站用 this.$swal,直接這樣呼叫使用 sweetalert2 了。 例如:


this.$swal({

 text: '你確定要刪除嗎',

 type: 'question',

 showCancelButton: true,

 confirmButtonText: '確定',

 cancelButtonText: '取消',

}).then(function () {

 // 確定要做的事

}, function() {
        // 取消要做的事
});


這是我的 main.js 局部:


雖然好像也有好心人推出 vue sweeralert 的套件,但因為我在用的時候還沒有人寫 XD
但我覺得自己匯入這樣的第三方套件 比較知道做了哪些事情 還蠻方便 也不用在 package.json 再多上一筆用 vue 包裝的第三方套件。

有任何其他做法的建議,也歡迎留言讓小的知道! 感謝感謝!

其他參考文章
http://www.codebyjigs.com/vue-plugin-sweetalert2/
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

留言

  1. /* Import Sweetalert2 Styles */
    @import '~sweetalert2/dist/sweetalert2.css';

    回覆刪除

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源