ES6小点心之通用弹窗

2018-01-12 21:19:50来源:cnblogs.com作者:DOM哥人点击

分享

小点心,顾名思义,开箱即食,拿来即用。

前端业务逻辑主要分为【交互效果】和【数据展示】两方面。数据展示可使用 MVVM 框架来实现。前端的交互效果常用的也就那么几种,比如弹窗,楼层定位,倒计时,下拉刷新,上拉加载更多等等。这些交互效果完全可以提出来做成通用的模块,以后不必再劳心费神去想怎么实现。就像 Swiper 封装了一个类来专门做轮播图一样,本系列的目的是通过封装一系列类来实现弹窗,楼层定位,倒计时等交互功能。

弹窗就无需多说了,几乎所有存在交互的页面都会用到,一个页面上甚至会有 N 多个弹窗。弹弹弹,弹出鱼尾纹。

弹窗的逻辑其实很简单,就是打开和关闭。如果这还不够,那就再加个回调。如果从面向对象的角度去看,把弹窗看成一个类想必是极好的,与之绑定的DOM块是它的属性,打开和关闭是它的方法,而且这样可以实现弹窗样式和逻辑的分离。

由于需要操作DOM,果断选择了王者级库——jQuery。

先定一个小目标:

  • 易用性,如果自己都觉得难用,那就没有分享的必要了 ̄□ ̄||;
  • 兼容性,兼容主流浏览器,但并非所有(比如 IE 低版本);
  • 移动优先,主要为移动端做更多的考虑;

Swiper 在这方面已经树立了典范。因此本系列均效仿 Swiper 的 API 风格,力求 Keep It Simple and Stupid。只需要相对宽松有序的 DOM 结构和一致的实例化风格,That's it,多一点不人性化的东西算俄输。

然后就有了第一个小点心:NormalPopup

GitHub

在线演示

基本示例

本示例包含了最基本的使用,只需传入弹窗 DOM 的选择器和要作为打开/关闭弹窗的选择器。

const popupA = new NormalPopup({    popup: '#popup-A',    openBtn: '.open-popup-A',    closeBtn: '.close-popup-A',}) 

使用回调

可以在实例化时传入打开或关闭回调函数,回调将在弹窗完全打开或关闭后(即在打开或关闭动画结束之后)被调用。

const popupB = new NormalPopup({    popup: '#popup-B',    openBtn: '.open-popup-B',    closeBtn: '.close-popup-B',    onOpen(){        alert('open B')    },    onClose(){        alert('close B')    },}) 

点击遮罩关闭

可以在实例化时设置点击遮罩关闭,但需要提供一个额外的 mask 选项,也就是需要弹窗的遮罩和弹窗的内容相分离。

const popupC = new NormalPopup({    mask: '#popup-C-mask',    popup: '#popup-C',    openBtn: '.open-popup-C',    closeOnClickMask: true,}) 

过渡动画时长

可以在实例化时传入可选的动画时长,默认是 0 毫秒。

const popupD = new NormalPopup({    popup: '#popup-D',    openBtn: '.open-popup-D',    closeBtn: '.close-popup-D',    duration: 600,}) 

with jQuery

每个 NormalPopup 实例都有一个 open 方法和一个 close 方法,并且可在调用时传入一个回调。请注意,在API方法中传入的回调将排在实例化传入的回调之后被调用。

$(document).on('click', '.clickBtnA', function(){    popupA.open(function(){        alert('open A with jQuery')    })}) 

with Vue

可以在任何时候实例化 NormalPopup 而不必非要等到 Vue 挂载到 DOM 之后。

...methods: {    openPopupC(){        popupC.open(function(){            alert('open C with Vue')        })    },}... 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台