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

相关文章

来自专栏算法channel

Git 分支的原理和应用实战,看这篇就够了!

通过这篇文章,相信大家会对git会有一些更深刻的体会。此篇文章先扼要总结了git和分支管理的基本原理(这是去年2月份我在博客上总结的),在这之后,是zhupc老...

371
来自专栏Deep learning进阶路

caffe随记(九)---利用FCN和已有的model进行图像语义分割

1、下载caffemodel 本例中我们使用的是pascalcontext-fcn32的模型,这个下载链接在它的文件夹里有,就是url那个文件 下载  pas...

2880
来自专栏点滴积累

PhiloGL学习(3)——程序员的法宝—键盘、鼠标

前言 上一篇文章中介绍了如何让对象动起来,本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动等。 一、 原理分析 有了上一篇文章的基础,我...

3387
来自专栏红色石头的机器学习之路

Jupyter notebook入门教程(上)

本文将分上下两部分简单介绍Jupyter notebook的入门教程,英文原文出处: Getting started with the Jupyter note...

3320
来自专栏蓝天

用 tr 过滤文件

您可以将 tr 看作为 sed 的(极其)简化的变体:它可以用一个字符来替换另一个字符,或者可以完全除去一些字符。您也可以用它来除去重复字符。这就是所有 tr ...

743
来自专栏君赏技术博客

关于AutoLayout原生Content Hugging和Content Resistance小研究

之前就知道系统AutoLayout有拉伸和挤压的设置,平时用Masonry设置优先级也是可以解决这样的挤压和压缩的问题。但是设置Masonry的优先级自己一直设...

854
来自专栏Jerry的SAP技术分享

给谷歌输入法增添自定义词组,提高输入效率

我在写微信公众号文章时,经常需要重复输入一些名词,比如CRM,C4C,S/4HANA等等。为了减少输入,我在查找一款输入法,能够让我通过少量的输入,就能够快速打...

801
来自专栏生信宝典

Python文学化编程 - Jupyter notebook使用和插件拓展

Jupyter notebook (Ipython notebook)是集代码、结果、文档三位一体的文学化可重复程序文档。支持40多种程序语言,Python为原...

32010
来自专栏北京马哥教育

玩转Linux - 神级工具 sed & awk

简介 本文主要介绍 Linux 系统的两个神级工具:sed 和 awk ,他们是Linux高手们必备的技能,很值得我们去研究的东西。 这里是我在网上书上收集的相...

3148
来自专栏程序生活

Python爬虫系列(三)多线程爬取斗图网站(皮皮虾,我们上车)

斗图我不怕 最近看了Python多线程的相关内容,并且前几天观看了腾讯课堂潭州学院上面的关于斗图网爬取的公开课,课程内容大致是利用Python多线程爬取斗图(多...

3906

扫码关注云+社区