一个行为标准Popup组件(vue), 强大的过度动画支持

本文作者：IMWeb DeepKolos 原文出处：IMWeb社区 未经同意，禁止转载

前言

之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调行为标准的popup组件

特点

1. 支持返回键, 可以按浏览器返回按钮关闭popup
2. 可以写出小复杂的过度动画, 比如磁贴按压效果在popUpMenu可看到
3. 支持css动画库, 比如animation.css, 使用的时候自行添加依赖就好了
4. 提供了几个比较好的popup组件, calendar, picker, imgViewer
5. 行为定义相对标准, 这一点比较重要的, 前端行为定义犹如算法的输入定义一样, 比如触发关闭之后, 结束动画未结束之前, popup会拦截输入事件, popup属于不可交互状态
6. 拓展比较方便~, 之后会补充popup编写的教程~
7. 差点忘说了, 强大的定位支持, 有居中, clickRelative, domRelative, 其中domRelative 支持25个位置
8. Layer都经过优化了, 层次合理~, 没有出现压缩层, 或者层爆栈的情况
9. 采用的是绝对的置顶策略, 就是即便在页面内设置fixed+z-index:99999999999;, 都不会遮盖弹出的popup

在线预览

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

前端行为定义犹如算法的输入定义一样重要, 感觉行为定义这方面需要注重一些