Vue3 使用 v-viewer 实现图片点击放大预览

博客文章中经常会包含项目截图、运行结果图或者代码截图。

如果图片尺寸比较大，直接铺在正文中会占用很多空间；如果缩小显示，图片中的细节又不容易看清。

比较合适的解决方案就是：

正文中正常展示图片，点击图片后再进行大图预览。

本文使用 v-viewer 实现 Vue3 博客文章中的图片点击放大功能。

一、安装 v-viewer

首先安装依赖：

npm install v-viewer

v-viewer 是基于 viewerjs 封装的 Vue 图片预览组件。

它可以实现：

图片点击放大
图片缩放
图片旋转
上一张 / 下一张切换
全屏查看

对于博客文章图片预览来说已经完全够用。

二、在 Vue3 中引入

打开项目的 main.js 或 main.ts。

引入 v-viewer：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

完整示例：

import { createApp } from 'vue'
import App from './App.vue'

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

const app = createApp(App)

app.use(Viewer)

app.mount('#app')

这里除了引入 v-viewer 之外，还需要引入：

import 'viewerjs/dist/viewer.css'

否则图片预览虽然可能可以打开，但对应的界面样式不会正常显示。

三、给文章正文添加 v-viewer

博客文章正文一般通过 v-html 渲染。

例如：

<div
    class="article-content"
    v-html="article.content">
</div>

只需要在正文容器上添加：

v-viewer

修改后：

<div
    class="article-content"
    v-viewer
    v-html="article.content">
</div>

这样文章正文中的图片就拥有了点击预览功能。

四、文章中的图片

例如文章 HTML 中包含：

<img src="https://example.com/test.jpg">

或者 Markdown：

![项目截图](https://example.com/test.jpg)

Markdown 转换成 HTML 后，本质上还是：

<img src="...">

因此即使文章内容是：

v-html="article.content"

动态渲染出来的图片，也可以使用 v-viewer 进行预览。

用户点击正文中的图片后，就会自动进入图片查看模式。

五、结合文章详情页使用

文章详情页可以写成：

<template>
    <div
        class="article-content"
        v-viewer
        v-html="article.content">
    </div>
</template>

相比自己实现遮罩层、缩放、关闭按钮等逻辑，使用 v-viewer 会简单很多。

核心其实就两步。

第一步，在项目入口注册：

app.use(Viewer)

第二步，在需要图片预览的容器上添加：

v-viewer

就完成了。

六、给图片增加点击效果

既然图片可以点击，最好在鼠标移动到图片上时给用户一些视觉提示。

例如：

::v-deep(.article-content img) {
    cursor: zoom-in;
}

这样鼠标移动到正文图片时，就会显示放大镜样式的鼠标指针。

还可以顺便给图片加一个圆角：

::v-deep(.article-content img) {
    max-width: 100%;
    border-radius: 6px;
    cursor: zoom-in;
}

其中：

max-width: 100%;

可以避免图片宽度超过正文容器。

七、最终代码

入口文件：

import { createApp } from 'vue'
import App from './App.vue'

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

const app = createApp(App)

app.use(Viewer)

app.mount('#app')

文章详情页：

<template>
    <div
        class="article-content"
        v-viewer
        v-html="article.content">
    </div>
</template>

<style scoped>
::v-deep(.article-content img) {
    max-width: 100%;
    border-radius: 6px;
    cursor: zoom-in;
}
</style>

这样就可以实现完整的正文图片点击放大效果。

八、总结

使用 v-viewer 实现博客图片预览非常简单。

核心只有三步：

安装 v-viewer；
在 Vue 项目入口中注册；
给正文容器添加 v-viewer。

之后文章中通过 Markdown 或 HTML 渲染出来的图片，就可以直接点击放大查看。

对于博客、文档系统、知识库等包含大量图片的页面来说，这个功能还是非常实用的。