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

前言

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller

Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo最方便使用的特点之一就是兼容ThemeRoller。ThemeRoller 是一个创建独特的...

1927
来自专栏丑胖侠

Win10系统,Intellij IDEA快捷键冲突

前两天系统盘损坏,升级到了Win10系统,重新装了软件,导致Intellij IDEA的快捷键各种冲突。本篇博客记录一下发型冲突的地方及修改方法。 冲突一 Ct...

24910
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

2546
来自专栏友弟技术工作室

iPic - MAC图床神器上传方式图床iPic 菜单iPic Mover

原文 ? 有了图床神器 iPic,不论屏幕截图、还是复制图片,都可以自动上传、保存 Markdown 格式的链接,直接粘贴插入,够懒人吧? 使用 Hexo | ...

3646
来自专栏无原型不设计

【Mockplus教程】收藏和重用

1. 制作模板 选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功...

2534
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

3162
来自专栏Fundebug

Vue UI:Vue开发者必不可少的工具

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

1735
来自专栏jeremy的技术点滴

微信小程序上手

5926
来自专栏木子昭的博客

简单优化前端工程几种方式(上篇)

如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源,...

743
来自专栏Esofar 开发日记

Silence - 专注于阅读的博客园主题

Silence 追求大道至简的终极真理,旨在打造一个干净、专注阅读的博客主题,没有二维空间元素、不存在花里胡哨。

1483

扫码关注云+社区