属性

属性	类型	默认值	说明
isOpen	boolean	—	对话框是否打开。用 v-model:is-open 绑定。
media	LightboxMedia | readonly LightboxMedia[]	—	一项，或一组。数组会显示上一张、下一张和计数。
index	number	—	受控的图库下标。用 v-model:index 绑定。
defaultIndex	number	0	没有传 index 时的起始下标。
hasZoom	boolean	false	双击、Enter、Space、+、- 缩放图片。放大后方向键平移。
hasAutoPlay	boolean	false	显示出视频时开始播放。

LightboxMedia 是 { src, alt, caption?, type? }。type 为 image 或 video，默认 image。

事件

事件	参数	说明
update:isOpen	boolean	关闭、Escape 或点遮罩时，请求改变打开状态。
update:index	number	上一张、下一张，或未放大时按方向键，请求换到新的下标。

useLightbox

const { bindings, open, close, isOpen, index, getTriggerProps } = useLightbox({
  media,
  hasZoom: false,
  hasAutoPlay: false,
})

bindings 是给 v-bind 用的属性和更新监听。open(index) 设置下标并打开对话框。getTriggerProps(index) 返回 role="button"、tabindex="0"、aria-haspopup="dialog"，以及键盘激活，给自定义触发元素用。

主题

对话框类名是 astryx-lightbox。说明文字用 large 字号、on-dark 颜色，最大宽度 600px，块方向起始边距为间距 2，行内两侧为间距 3。关闭和翻页按钮距画面边缘为间距 3。