Vue使用v-viewer实现图片预览和缩放

最新推荐文章于 2025-10-23 02:24:19 发布

原创

最新推荐文章于 2025-10-23 02:24:19 发布 · 3.2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何在Vue项目中使用v-viewer组件进行图片预览，包括安装、配置、指令使用等步骤，并展示了遇到的层级遮罩问题及解决方案。通过v-viewer，你可以实现缩放、旋转、翻转等多种图片操作。

v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等等功能,支持配置化.非常强大,这里记录一下使用过程:

首先v-viewer的中文文档传送门:Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari's Blog

install:

npm i v-viewer -S

import VueViewer, { directive as viewerDirective } from 'v-viewer';
import 'viewerjs/dist/viewer.css'; // 图片预览器的样式
import Vue from 'vue';

Vue.use(VueViewer, {
            defaultOptions: {
                /**
                 *  数字含义:
                 *  0 or false: hide the navbar
                    1 or true: show the navbar
                    2: show the navbar only when the screen width is