前言
之前看過很多的元件庫, 但是它們的Popup行為和原生的介面差別不大, 但是行為上面卻各種小細節不足, 所以有了這個強調行為標準的popup元件
特點
- 支援
返回鍵, 可以按瀏覽器返回按鈕關閉popup - 可以寫出小複雜的
過度動畫, 比如磁貼按壓效果[在popUpMenu可看到] - 支援css動畫庫, 比如animation.css, 使用的時候自行新增依賴就好了
- 提供了幾個比較好的popup元件, calendar, picker, imgViewer
行為定義相對標準, 這一點比較重要的, 前端行為定義猶如演算法的輸入定義一樣, 比如觸發關閉之後, 結束動畫未結束之前, popup會攔截輸入事件, popup屬於不可互動狀態- 擴充比較方便~, 之後會補充popup編寫的教程~
- 差點忘說了, 強大的定位支援, 有
居中,clickRelative,domRelative, 其中domRelative支援25個位置 Layer都經過優化了, 層次合理~, 沒有出現壓縮層, 或者層爆炸的情況- 採用的是
絕對的置頂策略, 就是即便在頁面內元素設定fixed+z-index:99999999999;, 都不會遮蓋彈出的popup
線上預覽
元件地址: https://github.com/deepkolos/vc-popup
前端行為定義猶如演算法的輸入定義一樣重要, 希望更多有關前端行為定義的文章出現
11/28更新
- 優化了calendar元件初始化的模版渲染策略, 消除渲染高峰 ,在chrome使用CPU x 6 slowdown效果對比如下
優化前1.2s
優化後0.4s, 3倍提速
原理很簡單, 在於削弱模版編譯高峰即可, 把一些給非即時需要顯示的部分可以在動畫結束之後後續初始化之
12/08更新
imgView支援懶載入圖片,從載入狀態的預設圖片到載入完成的src同步變化~