File size: 2,539 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | ---
import "@fancyapps/ui/dist/fancybox/fancybox.css";
import "@/styles/fancybox-custom.css";
// Fancybox 管理器组件
---
<script>
let Fancybox: any;
async function setup() {
const selectors = [
".custom-md img, #post-cover img, .moment-images img",
".moment-images a[data-fancybox]",
"[data-fancybox]:not(.moment-images a)"
];
// 检查页面是否存在需要 Fancybox 的元素
const hasElements = selectors.some(selector => document.querySelector(selector));
if (!hasElements) return;
// 动态导入资源
if (!Fancybox) {
const mod = await import("@fancyapps/ui");
Fancybox = mod.Fancybox;
}
// 通用配置
const commonOptions = {
Thumbs: {
autoStart: true,
showOnStart: "yes",
},
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
animated: true,
dragToClose: true,
keyboard: {
Escape: "close",
Delete: "close",
Backspace: "close",
PageUp: "next",
PageDown: "prev",
ArrowUp: "next",
ArrowDown: "prev",
ArrowRight: "next",
ArrowLeft: "prev",
},
fitToView: true,
preload: 3,
infinite: true,
Panzoom: {
maxScale: 3,
minScale: 1,
},
caption: false,
};
// 绑定图片
Fancybox.bind(".custom-md img, #post-cover img, .moment-images img", {
...commonOptions,
groupAll: true,
Carousel: {
transition: "slide",
preload: 2,
},
});
// 绑定链接
Fancybox.bind(".moment-images a[data-fancybox]", {
...commonOptions,
source: (el: any) => el.getAttribute("data-src") || el.getAttribute("href"),
});
// 绑定其他
Fancybox.bind("[data-fancybox]:not(.moment-images a)", commonOptions);
}
function cleanupFancybox() {
if (Fancybox) {
Fancybox.close();
Fancybox.unbind(document.body);
}
}
// 初始化
setup();
// Swup 生命周期整合
document.addEventListener("swup:content:replace", setup);
document.addEventListener("swup:visit:start", cleanupFancybox);
</script>
|