一个行为标准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同步变化~