一個行爲標準Popup組件(vue), 強大的過分動畫支持, 和定位支持

前言

以前看過不少的組件庫, 可是它們的Popup行爲和原生的界面差異不大, 可是行爲上面卻各類小細節不足, 因此有了這個強調行爲標準的popup組件

特色

0. 支持返回鍵, 能夠按瀏覽器返回按鈕關閉popup
1. 能夠寫出小複雜的過分動畫, 好比磁貼按壓效果[在popUpMenu可看到]
2. 支持css動畫庫, 好比animation.css, 使用的時候自行添加依賴就行了
3. 提供了幾個比較好的popup組件, calendar, picker, imgViewer
4. 行爲定義相對標準, 這一點比較重要的, 前端行爲定義猶如算法的輸入定義同樣, 好比觸發關閉以後, 結束動畫未結束以前, popup會攔截輸入事件, popup屬於不可交互狀態
5. 拓展比較方便~, 以後會補充popup編寫的教程~
6. 差點忘說了, 強大的定位支持, 有居中, clickRelative, domRelative, 其中domRelative 支持25個位置
7. Layer都通過優化了, 層次合理~, 沒有出現壓縮層, 或者層爆炸的狀況
8. 採用的是絕對的置頂策略, 就是即使在頁面內元素設置fixed+z-index:99999999999;, 都不會遮蓋彈出的popup

在線預覽

組件地址: https://github.com/deepkolos/vc-popup

前端行爲定義猶如算法的輸入定義同樣重要, 但願更多有關前端行爲定義的文章出現

---

11/28更新

0. 優化了calendar組件初始化的模版渲染策略, 消除渲染高峯 ,在chrome使用CPU x 6 slowdown效果對好比下

優化前1.2s

優化後0.4s, 3倍提速

原理很簡單, 在於削弱模版編譯高峯便可, 把一些給非即時須要顯示的部分能夠在動畫結束以後後續初始化之

12/08更新

imgView支持懶加載圖片,從加載狀態的預設圖片到加載完成的src同步變化~