VuePress

medium-zoom

@vuepress/plugin-medium-zoom

将 medium-zoom在新窗口打开 集成到 VuePress 中，为图片提供可缩放的功能。

该插件已经集成到默认主题中。

使用方法

npm i -D @vuepress/plugin-medium-zoom@next

import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'

export default {
  plugins: [
    mediumZoomPlugin({
      // 配置项
    }),
  ],
}

配置项

selector

  • 类型： string

  • 默认值： ':not(a) > img'

  • 详情：

    可缩放的图片的选择器。

    默认情况下，该插件会使 <a> 标签以外的所有图片都支持缩放。

delay

  • 类型： number

  • 默认值： 500

  • 详情：

    以毫秒为单位的延迟。

    在切换路由进入一个新页面时，该插件会在一定延迟后才使页面内的图片支持缩放。

zoomOptions

样式

你可以通过 zoomOptions 对大部分的缩放样式进行自定义，不过作为补充，该插件同样提供了一些 CSS 变量：

:root {
  --medium-zoom-z-index: 100;
  --medium-zoom-bg-color: #ffffff;
  --medium-zoom-opacity: 1;
}

Composition API

useMediumZoom

  • 详情：

    返回该插件使用的 Zoom 实例，便于你直接使用实例上的 methods在新窗口打开 。

    该插件会在切换路由进入当前页面时使图片支持缩放。但如果你要动态添加新图片，那么你可能就需要这个方法来让这些新图片也支持缩放。

    该插件在 Zoom 实例上额外添加了一个 refresh 方法，它将使用 selector 作为默认参数，先调用 zoom.detach() 再调用 zoom.attach() ，便于你快速刷新当前页面图片的缩放状态。

  • 示例：

import { nextTick } from 'vue'
import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'

export default {
  setup() {
    const zoom = useMediumZoom()

    // ... 进行了一些操作，在当前页面添加了新的图片

    // 此时你可能需要手动调用 `refresh` 来让这些新图片支持缩放
    nextTick(() => {
      zoom.refresh()
    })
  },
}