現(xiàn)象
最近的一個項目使用了ABP框架（ASP.NET Core+Angular）央串，開發(fā)中想要修改通知提示的彈窗默認位置（默認位置是左下角，想要修改到中間上方），代碼如下草穆，但發(fā)現(xiàn)修改無效祈惶。
abp.notify.success("創(chuàng)建成功","",{ positionClass: "toast-top-center" });
原因
經(jīng)過查看相關(guān)部分的內(nèi)部代碼發(fā)現(xiàn)雕旨，問題的根本原因扮匠，是因為ABP新舊版本的差別導(dǎo)致的。ABP框架（ASP.NET Core+Angular）中凡涩，前端的通知提示用到了一個封裝的模塊notify棒搜。在低版本中，這個模塊內(nèi)部依賴toastr組件活箕，這一點在介紹ABP框架的博客文章中都有說明力麸。而上述不起效的代碼，就是按照這個舊版本來的育韩。而當前的項目克蚂，用的是新版ABP框架，內(nèi)部代碼已經(jīng)有所改變筋讨。
同時埃叭，這些文章還提到一個Message模塊，也是用來彈窗提示的悉罕。不過與Notify不同的是赤屋，Message一般為模態(tài)彈窗，Notify一般為非模態(tài)壁袄。而Message模塊中益缎，用到的是sweetalert組件。
以上是在低版本中的情況（具體是哪些版本則不知曉然想，但下文會介紹具體的區(qū)分方法）莺奔，但在新版本中，情況有所不同变泄。
在新版本中令哟，sweetalert組件更新到sweetalert2，notify內(nèi)部不再依賴toastr組件妨蛹，而是轉(zhuǎn)而同Message組件一起依賴sweetalert2組件屏富。
toastr和sweetalert2的用法相似，但具體的配置還是很不同的蛙卤『莅耄可是這種差別，經(jīng)過notify模塊的封裝颤难，對于外部調(diào)用者來說是察覺不到的神年。這就導(dǎo)致了上述的現(xiàn)象。
解決方案
知道了原因行嗤，問題自然也就可以迎刃而解已日。只要按照sweetalert2組件的使用規(guī)則來配置即可。代碼如下所示栅屏。注意這里飘千，設(shè)置位置的屬性叫“position”堂鲜，已經(jīng)與toastr組件不同了。
abp.notify.success("創(chuàng)建成功","",{ position: "top" });
根據(jù)sweetalert2組件的官方文檔介紹护奈，其位置屬性可以取9種值缔莲，分別為：'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'。其實也就是對應(yīng)著九宮格的位置霉旗。
擴展
下面展示一下兩個不同版本酌予，其內(nèi)部封裝的代碼。這就是上文說的區(qū)分兩個版本的證據(jù)奖慌。
在新版中抛虫，在assets文件夾下，有一個abp-web-resources文件夾简僧，其內(nèi)有abp.sweet-alert.js文件建椰。這些都是可以直接在VS Code中看到的。
在這個文件中岛马，定義了notify.success等方法的具體實現(xiàn)棉姐。這里用到了Swal這個對象±材妫可見的代碼中看不到這個對象的定義和構(gòu)造過程伞矩，也看不出跟sweetalert2組件有什么關(guān)聯(lián)，還是在網(wǎng)上搜索才找到的夏志。
而在舊版本中乃坤，無法直接在VS Code中找到abp.sweet-alert.js，它存在于node_modules文件夾下沟蔑，可以在資源瀏覽器中找到湿诊。其路徑為：node_modules\abp-web-resources\Abp\Framework\scripts\libs\abp.sweet-alert.js。
但是在這個文件中瘦材，只有關(guān)于Message的實現(xiàn)厅须，沒有關(guān)于notify的任何代碼。這就說明食棕，在就版本中朗和，Notify的底部依賴跟Message是不同的，但在新版本中是相同的（都依賴sweetalert2）簿晓。
參考資料：
ABP博客文章
sweetalert2官方文檔
toastr組件的Github地址
toastr組件的演示地址（在我的瀏覽器中測試不起作用）
