關於abp中使用的sweetalert對話框組件的confirm確認對話框中的一個坑的解決過程


今天修改了一個功能,限制刪除用戶,在刪除的時候不滿足條件的時候提示用戶原因,使用的sweet alert組件。
abp框架前端集成了sweet alert 對http請求的error做了全局處理,我在后台程序直接拋出的UserFriendlyExcption,開始的時候發現能提示,然后再次操作發現沒顯示提示了,
卧槽,一臉懵逼啊,哪里的問題啊,趕忙把代碼從頭到尾檢查一遍沒問題啊,然后測試其他有這種錯誤提示的地方,發現沒問題啊,都有提示的,就只有這里出現問題。。。
那就調試吧,在abp.ng.js源文件中打了一個斷點調試,然后操作一步一步走,結果發現sweet alert是顯示出來了的,只不過又馬上被隱藏了。

具體的sweet alert的elements如下:

<div class="sweet-alert showSweetAlert visible" tabindex="-1" data-custom-class="" data-has-cancel-button="false" data-allow-ouside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" style="display: none; margin-top: -190px; opacity: -0.06;">
    <div class="icon error animateErrorIcon" style="display: block;"><span class="x-mark animateXMark"><span class="line left"></span><span class="line right"></span></span></div>
    <div class="icon warning" style="display: none;"> <span class="body"></span> <span class="dot"></span> </div> 
<div class="icon info" style="display: none;"></div>
 <div class="icon success" style="display: none;"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div>
 <div class="icon custom" style="display: none;"></div> <h2>您不能刪除該當班用戶,請等待用戶交班后再進行刪除!</h2><p style="display: block;"></p><button class="cancel" tabindex="2" style="display: none; box-shadow: none;">Cancel</button><button class="confirm" tabindex="1" style="background-color: rgb(174, 222, 244); box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;">Ok</button></div>

一看div容器的class是visible,表示是顯示了的,只不過是style上的display為none,被隱藏了,又是一臉懵逼,想到難道是其他地方的代碼直接修改了div的行內樣式?但是仔細一分析也不對啊,其他地方的代碼又沒有專門對sweet alert的elements修改,就算是有代碼使用的div選擇器那么修改的也是頁面所有的div,而不會僅僅是sweet下的div。
這樣看來應該還是sweet alert組件自己修改的,為了確認這個問題,在瀏覽器elements選卡下 選中sweet alert的elements,使用 break on功能進行調試,經過幾次操作發現確實是sweet alert自身修改的樣式。

問題確認那么就找找是哪里觸發的,通過連續的操作,仔細觀察,發現在sweet alert confirm確認對話框關閉的過程中,后台處理已經處理完成直接彈出sweet alert的提示框了,然后confirm關閉的時候直接把提示對話框也關閉了。

我了割草,終於發現問題了,因為sweet alert所有的對話框,提示框都是公用的一塊elements,所以兩個提示框不能同時出現,不然就會出現混亂。
找到問題點了,處理起來就簡單了,找到abp.sweet-alert.js文件,找到abp.message.confirm函數修改最后的return部分代碼:

        return $.Deferred(function ($dfd) {
            sweetAlert(opts, function (isConfirmed) {
                callback && callback(isConfirmed);
                $dfd.resolve(isConfirmed);
            });
        });

改為:

        return $.Deferred(function ($dfd) {
            sweetAlert(opts, function (isConfirmed) {
                setTimeout(function () { callback && callback(isConfirmed); },300);
                $dfd.resolve(isConfirmed);
            });
        });

使用settimeout函數,延遲300毫秒去執行callback回調函數,這樣就不會沖突了。
修改這地方是為了統一處理confirm對話框的情況,也可以直接修改調用confirm的地方,callback函數里面使用settimeout延遲執行業務操作,只不過這樣只能處理一處,非特殊情況建議還是直接修改abp.sweet-alert.js。
至此,問題完美解決。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM