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

最新推荐文章于 2025-11-08 08:01:33 发布

原创

最新推荐文章于 2025-11-08 08:01:33 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

背景

我想实现一个在预览页面中图片的功能，查了下资料，各种教程，但是都是写的十分繁琐，本文将介绍 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+typescr