spz-lightbox 对话框

模态对话框。

布局

nodisplay

何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 lightbox 在当前页面正中打开一个浮层，承载相应的操作。

代码演示

基本用法

当 lightbox 打开时，可以通过点击蒙层或者点击关闭按钮来关闭 lightbox。
当 lightbox 打开时，页面底部禁止滚动。

<button @tap="lightbox.open">Open lightbox</button>

<spz-lightbox layout="nodisplay" id="lightbox" hidden>
  <div>
    <div>
      <h3>Basic Lightbox</h3>
      <button @tap="lightbox.close">Close</button>
    </div>
    <div>Some contents...</div>
    <div>Some contents...</div>
    <div>Some contents...</div>
  </div>
</spz-lightbox>

自定义关闭按钮

使用带有close属性的元素来充当关闭按钮，该元素会自动绑定关闭弹窗的点击事件。

属性

属性名	说明	类型	默认值	是否必需
disable-unmount	如果该属性存在，禁止元素关闭时卸载	-	-	否
unclose-in-focus	如果该属性存在，当元素获得失去焦点时，对话框不会关闭	-	-	否
animate-in	对话框出现的过渡动画效果	AnimationPresets	`fade-in`	否

AnimationPresets可选值

fade-in

渐显效果，默认过渡时间为0.1s。

fly-in-bottom

从下方向上移动出现，默认过渡时间为0.2s。

fly-in-top

从上方向下移动出现，默认过渡时间为0.2s。

方法

open

打开对话框，不需要参数。

close

关闭对话框，不需要参数。

事件

open

当打开对话框时组件自动触发该事件，不需要参数。

close

当关闭对话框时组件自动触发该事件，不需要参数。