10月31, 2016

js弹窗设计

最近在写弹窗组件,刚好有一些思考,记录一下。

弹窗的形式一般会有两种:

  • 标准弹窗
  • 非标准弹窗

所谓的标准弹窗,就是指外框+关闭按钮+标题(title)+ 内容(Content)+ 底部按钮(确认、取消),而非标准只是提供外框+关闭按钮。

因此有了以下的API:

  • type (用来区分是标准弹窗还是非标准)
  • close (true or false,是否有关闭按钮)
  • width (弹窗宽度)
  • height (弹窗高度)
  • title (标题,当标题为空时,整个标题栏是可以为空的,只剩下内容区域)
  • content (内容)
  • ok (当值为string时,表示ok的文案;当值为true时,ok按钮显示)
  • cancel (当值为string时,表示cancel的文案;当值为true时,cancel按钮显示)
  • okFn (点击ok触发的事件,当ok不存在时,ok按钮显示)
  • cancelFn (点击 cancel触发的事件,当cancel不存在时,cancel按钮显示)

在实际中,可能还有其他的需求,例如:

  • btnPos (通过它来确定底部按钮的排版,是居右、居中,还是居左?)
  • draggable (标题是否可拖拽)

制定好了API,我们来考虑一下弹窗会有哪些点值得去注意的:

  • 当存在多个弹窗时,蒙层只有1个(确保唯一性)

  • 内容的高度。针对弹窗本身肯定有一个高度的限制。像我的项目中有一个专门的modal配置项,代码如下:

export default {
    minWidth: 420,
    minHeight: 170,
    maxWidth: 920,
    maxHeight: 580,
    hdHeight: 45, //44 + 1 (下边框)
    ftHeight: 30,
    padding: 16
}

通过这些值来确定Content内容的高度,但是也有会有一种场景,弹窗要求高度自适应(在未超出最大高度),这个也需要做出处理。

  • 像Confirm这种必须提供Promise,通过then的写法来进行确定后的操作。

  • 支持ESC的关闭

  • 要考虑动画过渡

  • 支持$on事件,即new出来的实例能通过$on来绑定API提供出来的事件。

看着好像挺简单的,其实写着还是有一定的挑战性,毕竟不使用jQuery来实现,要考虑组件在销毁的时候,自己要手动解绑事件(不然会有内存泄露)。

本文链接:www.my-fe.pub/post/js-for-popup.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。