sweetalert使用踩坑記--animation配置失效--源碼攀爬之旅

時間 2019-12-01

標籤 sweetalert 使用 animation 配置失效源碼攀爬之旅简体版

原文原文鏈接

文章結論

先寫結論，省童鞋們的時間：sweetalert不支持（廢棄了）animation的配置java

前言背景

應屆生新人入職半個月，今日情景~~
git

產品大大提出需求：「這個這個，彈框‘噔’一下的動畫感受很累贅嘛，xxx去掉一下」；
「奴才領命」查閱代碼發現公司採用sweetalert做爲彈窗提示插件，插件嘛，簡單，看看文檔看看博客預期三除五二下應該很快能解決，怎奈，他那時候還太年輕，不知道全部命運饋贈的禮物，早已經在暗中標好了價格。遂開始踩坑之旅

問題

其實狀況挺簡單，查找文檔以及網友支持，都說只要配置animation項便可，但配置好了打死不生效，開始擔憂版本，1.0和2.0的版本中，前者說是用false，後者說是用none，雖然說查看源碼版本說是1.0，但也都試試了，結果果真。。仍是然並卵；開始撓頭。。通過一上午的查閱資料和博客無效，放棄掙扎，再者咱怎能當伸手黨，來到史上最大的同性交友網站--github，開始查閱源碼，注意注意，重點來啦，源碼開始！！github

源碼淺略解析

使用代碼及效果以下

swal({
                  title: "刪除訂單",
                  text:'訂單刪除後不可找回，請確認是否刪除',
                  icon: "error",
                  animation: false,
                  buttons: {
                    cancel: '取消',
                    confirm: '肯定刪除',
                  }
                }).then(isConfirm => {
                    if(isConfirm){
                        self.delete_loading = true
                        http.delete('/order/'+item.id,{},response => {
                            self.delete_loading = false
                            self.current_order.splice(index, 1)
                        })
                    }
                })
複製代碼

首先來到源碼文件夾,本小菜開始在src下尋找入口文件（別問爲啥）

進入core.ts文件開始探究，關鍵代碼以下（雖然是typescript寫的，但其實語法差別是不大的，結合以前實習過java，ts我的理解只是對弱類型的js進行了一層抽象與規範而已，不瞭解ts的童鞋看不懂的地方就當沒看見，其實也是可以理解的啦）

const swal:SweetAlert = (...args) => {

  // Prevent library to be run in Node env:
  if (typeof window === 'undefined') return;

  const opts: SwalOptions = getOpts(...args);

  return new Promise<any>((resolve, reject) => {
    state.promise = { resolve, reject };

    init(opts);

    // For fade animation to work:
    setTimeout(() => {
      openModal();
    });

  });
};
複製代碼