32 lines
963 B
JavaScript
32 lines
963 B
JavaScript
import { reactive } from 'vue'
|
|
|
|
// 全站通用的图片预览（lightbox）。任何地方的配图都可以
|
|
// openLightbox(list, index) 打开：list 是同组图片的 URL 数组，index 是
|
|
// 点击的那张。Esc / 点空白 / 关闭钮收起，左右键或箭头在同组图片间切换。
|
|
// 打开时锁 body 滚动（和菜单 sheet 同一套做法）。
|
|
const state = reactive({
|
|
list: [],
|
|
index: 0,
|
|
open: false
|
|
})
|
|
|
|
export const lightboxState = state
|
|
|
|
export function openLightbox(list, index = 0) {
|
|
if (!list || !list.length) return
|
|
state.list = list
|
|
state.index = Math.max(0, Math.min(index, list.length - 1))
|
|
state.open = true
|
|
document.body.style.overflow = 'hidden'
|
|
}
|
|
|
|
export function closeLightbox() {
|
|
state.open = false
|
|
document.body.style.overflow = ''
|
|
}
|
|
|
|
export function stepLightbox(delta) {
|
|
if (!state.open || state.list.length < 2) return
|
|
state.index = (state.index + delta + state.list.length) % state.list.length
|
|
}
|