具體案例查看co-dialog:https://koringz.github.io/co-dialog/index.htmlhtml
2.0.1版本優化項,代碼壓縮,修復PC和移動端自適應,修復顯示彈出框瀏覽器邊框隱藏對body產生內容錯位,添加 onResize 默認爲 true, 添加選項 type 不一樣類型顯示彈出框 ['success', 'error', 'warning', 'info', 'question'].git
壓縮內容的實現方式,主要是經過重構了內部代碼,整理靜態方法,抽離被屢次調用的代碼,抽離的代碼結合對象結構,另外結合函數結構,重複出現代碼進行合併處理。github
PC和移動端自適應以前考慮參考 sweetAlert2 用flex彈性佈局,可是由於sweetAlert2 不支持拖放,且layout佈局僅居中顯示,因此放棄了flex佈局,採用absolute佈局,結合onResize簡單實現,而且默認狀況爲true。瀏覽器
修復點擊顯示彈出框時,瀏覽器邊框隱藏對body產生內容錯位。實際上是對body進行一次位移差計算,瀏覽器邊框沒了,body寬度就比之前多了,那麼body裏面的內容就發生錯位,解決錯誤使用瀏覽器的寬度 減去 body的寬度,得出邊框的寬度,最後給body使用paddingRight設置內邊距,實現全屏效果而且不會發生錯位。app
添加選項 type 不一樣類型顯示彈出框,這是type就是一個icon提示效果的功能,好比http請求失敗和成功,警告等信息,就必須有這個交互性效果存在,咱們只須要設置type便可,好比:函數
最簡單的方式,這個success就是我設置的type類型。佈局
coog.app(".base").use("標題","這是一個基礎的彈出框", 「success」).show()
在use方法裏面設置flex
coog.app(".try-drag").use({ title: "拖動-isDrag", message: "請嘗試拖動窗口", isDrag: true, type: "success", }).show()