简单优雅的页面图片预览插件 v-viewer 推荐

背景

我想实现一个在预览页面中图片的功能，查了下资料，各种教程，但是都是写的十分繁琐，本文将介绍 v-viewer 插件，简单轻松实现这一功能。

1. 安装 v-viewer

首先，项目中安装 v-viewer：

npm install v-viewer@next

 2.在main.js中配置

import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";

app.use(Viewer, {
  defaultOptions: {
    inline: false,  // 启用内联模式。
    button: true,  // 在查看器的右上角显示按钮。
    navbar: true,  // 导航栏的可见性。
    title: true,  // 标题的可见性和内容。
    toolbar: true,  // 工具栏及其按钮的可见性和布局。
    tooltip: true,  // 放大或缩小时显示带有图像比率（百分比）的工具提示。
    movable: true,  // 移动图像。
    zoomable: true,  // 缩放图像
    rotatable: true,  // 旋转图像
    scalable: true,  // 缩放图像。
    transition: true,  // 为某些特殊元素启用CSS3转换。
    fullscreen: true,  // 启用以在播放时请求全屏。
    keyboard: true,  // 启用键盘支持。
    url: 'src',  // 默认值：'src'。定义获取原始图像URL以供查看的位置。
  },
});

如果是正常vue项目中使用，以上配置就可以了，我是在nuxt3+vue3.0+typescript项目中中使用，所以配置略有不同。 

3. 创建 Nuxt 插件

为了在整个项目中使用 v-viewer，我们需要创建一个 Nuxt 插件来注册这个插件。在你的 Nuxt 项目的 plugins 目录下，创建一个新的文件，比如 viewer.client.ts。

// plugins/viewer.client.ts

import { defineNuxtPlugin } from '#app'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Viewer, {// 相关配置})
})

注意：为了确保 v-viewer 只在客户端运行，文件名需要以 .client.ts 结尾。

4. 使用 v-viewer

现在，我们可以在 Nuxt 3 项目的组件中使用 v-viewer。直接在模板中使用 v-viewer指令就可以了:

在上面的代码中，v-viewer 指令被应用于包含图片的 div 元素。这样，当页面内容中存在图片，点击图片时，v-viewer 将会自动激活并显示图片的放大预览。

5. 验证与测试

在完成上述步骤后，启动项目，打开包含图片页面，点击图片即可体验放大预览的效果。如果你需要进一步调整样式或功能，可以参考 Viewer.js 的官方文档 获取更多信息。

6. 总结

通过 v-viewer，你可以轻松为 Nuxt 3 项目中的图片添加强大的放大预览功能。这种功能不仅提升了用户体验，也让你的图片展示更加专业。如果你有任何问题或想法，欢迎在评论区讨论。

希望这篇教程对你有所帮助！