photo-swipe

@vuepress/plugin-photo-swipe

此插件使用 PhotoSwipe 提供图片画廊功能，允许用户在优雅的全屏灯箱中查看图片，支持缩放、导航和分享功能。

使用方法

npm i -D @vuepress/plugin-photo-swipe@next
.vuepress/config.ts
import { photoSwipePlugin } from '@vuepress/plugin-photo-swipe'

export default {
  plugins: [
    photoSwipePlugin({
      // 选项
    }),
  ],
}

指南

预览模式

在图片预览模式中，你可以:

  • 左右滑动按顺序浏览页面内其他的图片
  • 查看图片的描述
  • 对图片进行缩放
  • 全屏浏览图片
  • 下载图片
  • 分享图片

提示

  • 除了点击右上角的 "×" 退出浏览模式外，在上下滚动超过一定距离后，会自动退出图片浏览模式。
  • 在移动端，或使用 PC 触控板，你可以使用平移、缩放手势在浏览模式中平移、缩放图片。

选项

selectorstring | string[]
默认值'[vp-content] :not(a) > img:not([no-view])'

图片选择器。

downloadboolean
默认值true

是否显示下载按钮。

fullscreenboolean
默认值true

是否显示全屏按钮。

scrollToCloseboolean
默认值true

是否在滚动时关闭当前图片。

localesPhotoSwipePluginLocaleConfig

插件的多语言配置。

参考：多语言配置。

locales.<localePath>.closestring

关闭按钮标签文字。

locales.<localePath>.downloadstring

下载按钮标签文字。

locales.<localePath>.fullscreenstring

全屏按钮标签文字。

locales.<localePath>.zoomstring

缩放按钮标签文字。

locales.<localePath>.arrowPrevstring

上一张图片按钮标签文字。

locales.<localePath>.arrowNextstring

下一张图片按钮标签文字。

Frontmatter

photoSwipeboolean | string

当前页面的图片选择器。

字符串会覆盖当前页面的 selector 选项，false 会在当前页面禁用插件，true 或不设置则使用插件选项。

客户端配置

definePhotoSwipeConfig

传递给 photo-swipe 的选项

.vuepress/client.ts
import { definePhotoSwipeConfig } from '@vuepress/plugin-photo-swipe/client'

definePhotoSwipeConfig({
  // 在此设置 PhotoSwipe 选项
})

API

createPhotoSwipe

你也可以通过 API 调用 PhotoSwipe。createPhotoSwipe 允许你以编程方式使用 PhotoSwipe 查看图片链接，它接收图片链接与 PhotoSwipe 选项，并返回一个 PhotoSwipeState：

<script setup lang="ts">
import { createPhotoSwipe } from '@vuepress/plugin-photo-swipe/client'
import { onMounted, onUnmounted } from 'vue'

let state: PhotoSwipeState | null = null

const openPhotoSwipe = (index: number): void => {
  state?.open(index - 1)
}

onMounted(async () => {
  // 通过图片链接创建一个新的 PhotoSwipe 实例
  state = await createPhotoSwipe(
    [
      'https://example.com/image1.png',
      'https://example.com/image2.png',
      'https://example.com/image3.png',
    ],
    {
      // PhotoSwipe 选项
    },
  )
})

onUnmounted(() => {
  state?.destroy()
})
</script>

<template>
  <button v-for="i in 3" :key="i" type="button" @click="openPhotoSwipe(i)">
    打开图片 {{ i }}
  </button>
</template>

PhotoSwipeState

createPhotoSwipe 返回的状态，用于控制它所创建的 PhotoSwipe 实例：

open(index: number) => void

在指定图片索引处打开 PhotoSwipe。

close() => void

关闭 PhotoSwipe 实例。

destroy() => void

释放该状态的监听器。当不再需要该状态时调用它，例如持有它的组件卸载时。

样式

你可以通过 CSS 变量自定义样式：

:root {
  --photo-swipe-c-bullet: var(--vp-c-bg-elv);
  --photo-swipe-c-bullet-active: var(--vp-c-accent);
}