Vue使用v-viewer 插件实现图片预览

最新推荐文章于 2025-05-29 10:48:25 发布

原创最新推荐文章于 2025-05-29 10:48:25 发布 · 624 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用v-viewer插件在Vue项目中实现图片点击放大预览功能。包括安装依赖、配置main.js及在组件中使用插件的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue图片点击放大预览v-viewer

1、安装依赖
npm install v-viewer --save

2.在main.js中引入

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3.使用插件

<viewer :images="photo"> 
      //photo 一定要一个数组，否则报错
          <img
                v-for="(src,index) in photo"
                :src="src"
                :key="index"
              >
</viewer>