perf: zoom image

gkd-kit · Apr 2, 2024 · 4a0fac0 · 4a0fac0
1 parent 6b5cc93
commit 4a0fac0
Showing 1 changed file with 9 additions and 13 deletions.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,7 @@
 import mediumZoom from 'medium-zoom';
+import { useRoute } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import { onMounted, onUnmounted } from 'vue';
+import { nextTick, onMounted, watch } from 'vue';
 import './custom.css';
 
 const zoomImages = () => {
@@ -11,17 +12,14 @@ const zoomImages = () => {
       images.push(v);
     });
   document
-    .querySelectorAll<HTMLImageElement>(
-      'img[src^="https://a.gkd.li/"]',
-    )
+    .querySelectorAll<HTMLImageElement>('img[src^="https://a.gkd.li/"]')
     .forEach((v) => {
       images.push(v);
     });
 
   for (const img of images) {
     if (!img.getAttribute('zoom-inited')) {
       img.setAttribute('zoom-inited', 'true');
-      // https://github.com/vuejs/vitepress/issues/854#issuecomment-1232938474
       mediumZoom(img, { background: 'rgba(0,0,0,0.7)' });
     }
   }
@@ -30,13 +28,11 @@ const zoomImages = () => {
 export default {
   ...DefaultTheme,
   setup() {
-    let task = 0;
-    onMounted(() => {
-      zoomImages();
-      task = window.setInterval(zoomImages, 3000);
-    });
-    onUnmounted(() => {
-      task && window.clearInterval(task);
-    });
+    onMounted(zoomImages);
+    const route = useRoute();
+    watch(
+      () => route.path,
+      () => nextTick(zoomImages),
+    );
   },
 };