1. 程式人生 > >co-dialog彈出框組件-版本v2.0.1

co-dialog彈出框組件-版本v2.0.1

簡單 拖放 設置 abs left 布局 dia align 進行

具體案例查看co-dialoghttps://koringz.github.io/co-dialog/index.html

2.0.1版本優化項,代碼壓縮,修復PC和移動端自適應,修復顯示彈出框瀏覽器邊框隱藏對body產生內容錯位,添加 onResize 默認為 true, 添加選項 type 不同類型顯示彈出框 [‘success‘, ‘error‘, ‘warning‘, ‘info‘, ‘question‘].

壓縮內容的實現方式,主要是通過重構了內部代碼,整理靜態方法,抽離被多次調用的代碼,抽離的代碼結合對象結構,另外結合函數結構,重復出現代碼進行合並處理。

PC和移動端自適應之前考慮參考 sweetAlert2

flex彈性布局,但是因為sweetAlert2 不支持拖放,且layout布局僅居中顯示,所以放棄了flex布局,采用absolute布局,結合onResize簡單實現,並且默認情況為true

修復點擊顯示彈出框時,瀏覽器邊框隱藏對body產生內容錯位。其實是對body進行一次位移差計算,瀏覽器邊框沒了,body寬度就比以前多了,那麽body裏面的內容就發生錯位,解決錯誤使用瀏覽器的寬度 減去 body的寬度,得出邊框的寬度,最後給body使用paddingRight設置內邊距,實現全屏效果並且不會發生錯位。

添加選項 type 不同類型顯示彈出框,這是type就是一個icon提示效果的功能,比如http請求失敗和成功,警告等信息,就必須有這個交互性效果存在,我們只需要設置

type即可,比如:

最簡單的方式,這個success就是我設置的type類型。

coog.app(".base").use("標題","這是一個基礎的彈出框", “success”).show() 

use方法裏面設置

coog.app(".try-drag").use({

    title: "拖動-isDrag",

    message: "請嘗試拖動窗口",

    isDrag: true,

    type: "success",

}).show()

co-dialog彈出框組件-版本v2.0.1