[VUE 组件] 行为标准 Popup 组件 (vue), 过度动画和定位支持

分享 DeepKolos ⋅ 于 2017-11-28 12:18:58 ⋅ 446 阅读

前言

之前看过很多的组件库, 但是它们的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

前端行为定义犹如算法的输入定义一样重要, 希望更多有关前端行为定义的文章出现


11/28更新

  1. 优化了calendar组件初始化的模版渲染策略, 消除渲染高峰 ,在chrome使用CPU x 6 slowdown效果对比如下

优化前1.2s

优化后0.4s, 3倍提速

原理很简单, 在于消除模版编译高峰即可, 把一些给非即时需要显示的部分可以在动画结束之后后续初始化之

原文: https://juejin.im/post/5a1bb899f265da43231ab18f

乐观 自信 爱

本帖已被设为精华帖!
本帖由 Summer 于 2周前 加精
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
      请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
    Ctrl+Enter