vitepress-plugin-image-preview

English | 简体中文

VitePress 图片预览插件，样式参考 Element Plus Image Viewer。

安装

pnpm add vitepress-plugin-image-preview

使用

在 .vitepress/config.ts 中引入插件：

import { defineConfig } from 'vitepress'
import { ImagePreviewPlugin } from 'vitepress-plugin-image-preview'

export default defineConfig({
  vite: {
    plugins: [
      ImagePreviewPlugin()
    ]
  }
})

选项

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | selector | 图片选择器 | string | .content-container .main img,.VPPage img | | wrapperId | 监听容器 ID | string | #VPContent | | slots | 插槽 | string \| string[] | ['doc-before','page-top'] | | showProgress | 是否在预览图片时显示进度条 | boolean | true | | infinite | 是否开启无限循环 | boolean | false | | zoomRatio | 缩放速率 | number | 1.2 | | hideOnClickModal | 点击 modal 时是否隐藏 | boolean | false | | minScale | 最小缩放比例 | number | 0.2 | | maxScale | 最大缩放比例 | number | 7 | | toolbar | 工具栏 | string[] | ['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download'] |

高级用法

import { defineConfig } from 'vitepress'
import { ImagePreviewPlugin } from 'vitepress-plugin-image-preview'

export default defineConfig({
  vite: {
    plugins: [
      ImagePreviewPlugin({
        // 自定义图片选择器
        selector: '.content-container .main img',
        // 自定义监听容器 ID
        wrapperId: '#VPContent',
        // 显示进度条
        showProgress: true,
        // 开启无限循环
        infinite: true,
        // 点击遮罩关闭
        hideOnClickModal: true,
        // 自定义缩放比率
        zoomRatio: 1.1,
        // 自定义工具栏
        toolbar: ['zoomIn', 'zoomOut', 'reset', 'rotateLeft', 'rotateRight', 'download']
      })
    ]
  }
})

类型定义

export interface ImagePreviewOptions {
  /**
   * Image selector
   * @default '.content-container .main img,.VPPage img'
   */
  selector?: string
  /**
   * Wrapper selector to attach event listener
   * @default '#VPContent'
   */
  wrapperId?: string

  /**
   * Slots to attach event listener
   * @default ['doc-before','page-top']
   */
  slots?: string | string[]

  /**
   * Show progress bar | 是否在预览图片时显示进度条
   * @default true
   */
  showProgress?: boolean

  /**
   * Infinite loop | 是否开启无限循环
   * @default false
   */
  infinite?: boolean

  /**
   * Zoom ratio | 缩放速率
   * @default 1.2
   */
  zoomRatio?: number

  /**
   * Hide modal on click | 点击 modal 时是否隐藏
   * @default false
   */
  hideOnClickModal?: boolean

  /**
   * Minimum scale | 最小缩放比例
   * @default 0.2
   */
  minScale?: number

  /**
   * Maximum scale | 最大缩放比例
   * @default 7
   */
  maxScale?: number

  /**
   * Toolbar | 工具栏
   * @default ['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download']
   */
  toolbar?: string[]
}