VitePress 图片放大功能完全指南 | medium-zoom 与 viewer.js 集成教程

1. medium-zoom

pnpm i medium-zoom

配置index.js/index.ts

// .vitepress/theme/index.js
import { useRoute } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { nextTick, onMounted, watch } from 'vue'
import './index.css'
import mediumZoom from 'medium-zoom'

export default {
  ...DefaultTheme,

  setup() {
    const route = useRoute()
    const initZoom = () => {
      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' })
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
    }
    onMounted(() => {
      initZoom()
    })
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    )
  }
}

配置index.css

/* .vitepress/theme/index.css */
/* 图片放大 */

.medium-zoom-overlay {
  z-index: 30;
}

.medium-zoom-image--opened {
  z-index: 31;
}

markdown图片配置

// docs/index.md

![VitePress](path/to/file.jpg){data-zoomable}
![VitePress](path/to/file.jpg)

2. vitepress-plugin-image-viewer

pnpm

pnpm add vitepress-plugin-image-viewer
# 提示：如果使用 pnpm 安装，还需要额外安装 viewerjs
pnpm add viewerjs

npm

npm i vitepress-plugin-image-viewer

yarn

yarn add vitepress-plugin-image-viewer

配置index.js/index.ts

import { useRoute } from 'vitepress'
import imageViewer from 'vitepress-plugin-image-viewer'
import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue'
import DefaultTheme from 'vitepress/theme'
import 'viewerjs/dist/viewer.min.css'

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    DefaultTheme.enhanceApp(ctx)
    // 注册全局组件，如果你不想使用也可以不添加
    ctx.app.component('vImageViewer', vImageViewer)
    // ...
  },
  setup() {
    // 获取路由
    const route = useRoute()
    // 使用
    imageViewer(route)
  }
}