一个行为标准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 条评论
登录 后参与评论

相关文章

来自专栏Grace development

PHP GD库解析一张简单图片并输出

400
来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

1042
来自专栏知道一点点

表单填写进度提示效果

Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非...

651
来自专栏菩提树下的杨过

Silverlgiht:快速去除/恢复对象的颜色

某些场景下,想将一个对象快速隐藏、恢复,而且不影响布局。有一种方法:将对象的透明度在1与0之间切换。 问:为什么不用Visibility? 答:这通常会导致重...

1727
来自专栏极乐技术社区

『教程』微信小程序--图片相关问题合辑

最近有注意到,很多同学在社区求助图片上传、加载、效果处理等相关的问题,这期专程做这样一个汇总供大家学习参考。 图片上传相关文章 微信小程序多张图片上传功能 微信...

67710
来自专栏前端新视界

关于 Chrome 浏览器中 onresize 事件的 Bug

我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏...

2116
来自专栏非著名程序员

一种新的 HeaderView + RecyclerView 实现方式

在 GitHub 开源了一种新的 Header View + RecyclerView 实现方式,使用 CoordinatorLayout 把 header 抽...

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

wordpress 搜索结果去除 Simple Urls 插件产生的短链接

朋友的 wordpress 使用了 simple urls 插件来做外链转内链的工作,确实很方便,但是有一个弊端,就是在博客中搜索关键词的时候,搜索结果中就会出...

742
来自专栏代码GG之家

android这些UI库,再不看你就OUT了

项目地址: https://github.com/luxiaoming/awesome-android-ui 本文推荐一些常用的UI库,...

2175
来自专栏React Native开发圈

React Native下载打开pdf文件

首先下载pdf文件到本地,react-native-pdf-view组件现在只能支持显示手机本地pdf。

871

扫码关注云+社区