灯箱 | astryx-vue

使用方法

Lightbox 用原生 <dialog> 打开媒体。isOpen 用 v-model:is-open 绑定。media 传一个对象就是单张图片或一段视频。传数组就是图库：上一张、下一张和计数一直留在页面上，到头时禁用，而不是消失。

useLightbox({ media }) 管打开状态和下标。把 bindings 绑到 Lightbox 上，缩略图里调用 open(index)。

hasZoom 把图片变成按钮。双击、Enter、Space、+、- 在 1 倍和 2 倍之间切换。放大后可以拖动，方向键每次平移 50px。拖动结束时的那一下点击不会把对话框关掉。视频用浏览器自己的控件，不能缩放。hasAutoPlay 在显示出视频时开始播放。

Escape 和关闭按钮都会发出 update:isOpen，值为 false。点对话框或画面外的遮罩也一样。

vue

<script setup lang="ts">
import { Lightbox, useLightbox } from '@astryx-vue/core/Lightbox'
import { Thumbnail } from '@astryx-vue/core/Thumbnail'

const photo = {
  src: '/template-assets/light-scene-horizontal-1.png',
  alt: 'Coastal shoreline with ocean waves',
  caption: 'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
}
const { bindings, open } = useLightbox({ media: photo })
</script>

<template>
  <Thumbnail :src="photo.src" :alt="photo.alt" :label="photo.alt" @click="open()" />
  <Lightbox v-bind="bindings" />
</template>

建议

建议	做法
推荐	`alt` 写出这是什么，`caption` 补上画面里看不出来的信息。
推荐	图库从读者点的那张打开，调用 `open(index)`。
推荐	只有静止图片、而且细节值得看时才打开 `hasZoom`。
避免	给视频加 `hasZoom`。视频保持浏览器控件，缩放不会生效。
避免	`alt` 留空。对话框名称和图片名称都从这里来。

解剖

部分	说明
查看器遮罩	铺满视口、装着当前媒体和控件的对话框遮罩。
媒体	查看器里正在展示的图片或视频。
关闭按钮	关闭查看器的按钮。
上一张	画廊里切到上一项媒体的按钮。
下一张	画廊里切到下一项媒体的按钮。
说明文字	显示在当前媒体下方、由使用方提供的说明。
计数	画廊模式里显示的当前位置和总数。