compose: 图片缩放

docs/.vitepress/theme/style.css

@@ -64,3 +64,11 @@
     transform: rotate(1turn);
   }
 }
+
+.medium-zoom-overlay {
+  z-index: 2147483646;
+}
+
+.medium-zoom-image {
+  z-index: 2147483647;
+}

docs/.vitepress/vitepress/components/vp-app.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import { onMounted } from 'vue'
   import nprogress from 'nprogress'
   import { useToggle } from '@vueuse/core'
   import { useSidebar } from '../composables/sidebar'
@@ -10,6 +9,9 @@
   import VPSidebar from './vp-sidebar.vue'
   import VPContent from './vp-content.vue'
   import VPOverlay from './vp-overlay.vue'
+  import { nextTick, onMounted, watch } from 'vue'
+  import { useRoute } from 'vitepress'
+  import mediumZoom from 'medium-zoom'
 
   const [isSidebarOpen, toggleSidebar] = useToggle(false)
   const { hasSidebar } = useSidebar()
@@ -20,7 +22,20 @@
     }
   })
 
+  const route = useRoute();
+  // 初始化点击图片放大
+  const initZoom = () => {
+    //mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
+    mediumZoom('.doc-content img', { background: 'var(--vp-c-bg)' });
+  };
+
+  watch(
+    () => route.path,
+    () => nextTick(() => initZoom())
+  );
+
   onMounted(async () => {
+    initZoom();
     window.addEventListener(
       'click',
       (e) => {

package.json

@@ -23,6 +23,7 @@
     "clipboard-copy": "^4.0.1",
     "dayjs": "^1.11.3",
     "element-plus": "^2.7.0",
+    "medium-zoom": "^1.1.0",
     "nprogress": "^0.2.0",
     "prism-theme-vars": "^0.2.3",
     "vue": "^3.2.36"