v-viewer插件使用

人鱼公主ww

已于 2023-11-16 14:30:01 修改

阅读量365

点赞数

文章标签：前端 vue

于 2023-11-16 14:22:16 首次发布

本文链接：https://blog.csdn.net/weixin_42255789/article/details/134440676

版权

本文介绍了如何在Vue应用中使用v-viewer插件实现图片的点击预览功能，包括安装、配置和在Vue文件中的使用，特别提到了配置修改时的注意事项。

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

期望

本文实现的事对单张图片进行点击预览，可缩小放大拖拽（文章最后代码自取）

使用插件步骤

安装插件

npm install v-viewer --save

在入口文件main.js中引入

在这里插入图片描述

在vue文件中使用

在这里插入图片描述

由于只是需要放大缩放拖拽功能，所以对配置进行了修改

在这里插入图片描述

注意！注意！注意

我在修改配置的时候，像网上的大多数文章那样都是下图这种写法，发现设置的都没有生效，找了很多文章后发现把外面的一层Option去掉，配置就生效了
在这里插入图片描述

import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);

Viewer.setDefaults({
  'zIndex': 9999,
  'inline': false, //启用lnline模式
  'button': true, //显示右上角关闭按钮
  'navbar': false, //显示缩略图导航
  'title': false, //显示当前图片的标题
  'toolbar': false, //显示工具栏
  'tooltip': true, //显示缩放百分比
  'movable': true, //显示可移动
  'zoomable': true, //图片是否可缩放
  'rotatable': true, //图片是否可旋转
  'scalable': true, //图片是否可翻转
  'transition': true, //使用css3过度
  'fullscreen': false, //播放时是否全屏
  'keyboard': true, //是否支持键盘
})

<viewer class="picdiv" >
// jzpstz是图片地址
  <img :src="jzpstz" alt="" class="image" />
 </viewer>