spz-lightbox 对话框#

#何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 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属性的元素来充当关闭按钮，该元素会自动绑定关闭弹窗的点击事件。

#属性

#AnimationPresets可选值

fade-in

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

fly-in-bottom

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

fly-in-top

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

#方法

#open

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

#close

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

#事件

open

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

close

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

#AI 摘要（LLM Ready）

• 组件标识：spz-lightbox
• 用途一句话：模态对话框。
• 可识别属性条目：3
• 可识别方法小节：2
• 可识别事件小节：2
• 关键属性名（Top）：disable-unmount、unclose-in-focus、animate-in
• 关键方法名（Top）：open、close
• 关键事件名（Top）：open、close
• 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
• 关联文档：/guide/actions-and-events/ 、/guide/layouts/