vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作）

最新推荐文章于 2024-04-27 08:53:55 发布
最新推荐文章于 2024-04-27 08:53:55 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： vue 文章标签： vue
原文链接：https://blog.csdn.net/guozhangqiang/article/details/82251893
版权

因项目需求（ui框架element-ui），需要实现图片的点击放大，还要能旋转以及上下切换。当时第一反应，element-ui好像没有这样的组件，就想过自己写，但是那个旋转翻页上下切换感觉有点麻烦，不甘心，就在GitHub找找找.........还真找到一个适合vue的插件，叫 viewerjs ，GitHub地址：https://github.com/fengyuanchen/viewerjs 。

说实话，它的功能还是很多很强大的，大家可以自己去看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。

1、首先是安装

npm install v-viewer --save

2、安装完引用（还要记得引用它的css样式）


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import Vue 
     
     from 
     
     'vue';
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import Viewer 
     
     from 
     
     'v-viewer'
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import 
     
     'viewerjs/dist/viewer.css'

3、vue注册调用，再调用setDefaults方法，根据自己项目需求配置。


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     Vue.use(Viewer);
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     Viewer.setDefaults({
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     'inline':
     
     true,
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     'button':
     
     true, 
     
     //右上角按钮
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "navbar": 
     
     true, 
     
     //底部缩略图
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "title": 
     
     true, 
     
     //当前图片标题
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "toolbar": 
     
     true, 
     
     //底部工具栏
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "tooltip": 
     
     true, 
     
     //显示缩放百分比
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "movable": 
     
     true, 
     
     //是否可以移动
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "zoomable": 
     
     true, 
     
     //是否可以缩放
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "rotatable": 
     
     true, 
     
     //是否可旋转
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "scalable": 
     
     true, 
     
     //是否可翻转
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "transition": 
     
     true, 
     
     //使用 CSS3 过度
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "fullscreen": 
     
     true, 
     
     //播放时是否全屏
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "keyboard": 
     
     true, 
     
     //是否支持键盘
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     "url": 
     
     "data-source",
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     ready: 
     
     function (e) {
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '组件以初始化');
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     show: 
     
     function (e) {
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片显示开始');
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     shown: 
     
     function (e) {
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片显示结束');
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     hide: 
     
     function (e) {
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片隐藏完成');
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     hidden: 
     
     function (e) {
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片隐藏结束');
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     view: 
     
     function (e) {
    
    
    
   
   
  33. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '视图开始');
    
    
    
   
   
  34. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  35. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     viewed: 
     
     function (e) {
    
    
    
   
   
  36. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '视图结束');
    
    
    
   
   
  37. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     // 索引为 1 的图片旋转20度
    
    
    
   
   
  38. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     if(e.detail.index === 
     
     1){
    
    
    
   
   
  39. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
              
     
     this.viewer.rotate(
     
     20);
    
    
    
   
   
  40. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           }
    
    
    
   
   
  41. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  42. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     zoom: 
     
     function (e) {
    
    
    
   
   
  43. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片缩放开始');
    
    
    
   
   
  44. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         },
    
    
    
   
   
  45. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     zoomed: 
     
     function (e) {
    
    
    
   
   
  46. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(e.type,
     
     '图片缩放结束');
    
    
    
   
   
  47. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  48. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       });

为理解方便，配一张表格说明以及图片说明

表格说明：

名称默认值说明
inlinefalse启用 inline 模式
buttontrue显示右上角关闭按钮
navbartrue显示缩略图导航
titletrue显示当前图片的标题
toolbartrue显示工具栏
tooltiptrue显示缩放百分比
movabletrue图片是否可移动
zoomabletrue图片是否可缩放
rotatabletrue图片是否可旋转
scalabletrue图片是否可翻转
transitiontrue使用 CSS3 过度
fullscreentrue播放时是否全屏
keyboardtrue是否支持键盘
urlsrc设置大图片的 url

图片说明：

4、代码中使用

4.1、图片列表代码


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <viewer :images="images" style="height: 800px;">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <img v-for="item in images" :src="item.src" :key="item.index" height="100">
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </viewer>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
    
    
    
   
   

 
 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     data() {
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     return {
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             images:[
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
               {src:
     
     'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',
     
     index:
     
     1},
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
               {src:
     
     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',
     
     index:
     
     2},
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
               {src:
     
     'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg',
     
     index:
     
     3},
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
               {src:
     
     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg',
     
     index:
     
     4},
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             ]
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           }
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }

最终效果就是上面图片说明的样子，具体还需要小伙伴们自己多试验试验。

新增一张GIF看起来直观点（变形了，建议点击放大看）

 

转载：https://blog.csdn.net/guozhangqiang/article/details/82251893

大碍桃花开
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 实现 PC 图片全屏放大预览（支持多图、切换、缩放、旋转、放大缩小、拖动、图片标题、键盘关闭、缩放比例、循环查看等等）
王佳斌
07-11 3790
本文提供从 0-1 实现 图片全屏预览（支持多图） 功能的详细步骤，并提供使用示例，另外，支持切换、缩放、旋转、放大缩小等功能，如果您不需要可以关掉。您可以按照自己的需求进行调整配置及样式。Vue项目使用v-viewer插件实现图片预览、切换、缩放、旋转，Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作，vue项目图片预览v-viewer插件使用vue图片查看器插件，vue预览图片 v-viewer，vue 实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，vue iview多张图片
vue中实现 图片的放大缩小和拖拽
m0_37343874的博客
11-21 2454
【代码】vue中实现 图片的放大缩小和拖拽。
在Vue中使用v-viewer插件实现点击图片预览
最新发布
qq_45569925的博客
04-27 833
注册插件，这样组件、指令和api会被一起安装到app全局。版插件，可用于图像查看，以及图片的旋转、缩放等功能预览。v-viewer是一款基于 viewer.js 封装的。指令添加到任意元素即可，该元素下的所有。【指令式调用我觉得非常简便】及必需的css样式，并使用。
vue 图片查看放大组件（包括拖拽，旋转，放大，切换下一张）
半梅芒果干的博客
11-30 1172
<template> <div v-if="showViewer" class="previewImg" :style="'top: '+ imgTop + 'px; left:'+ imgLeft+'px'" @mousewheel.prevent="wheelChange" @mousedown.self="mousedown" @mousemove.self="mousemove" @mouseleave.self="mouseleave" @mouseup.self="mous
Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
Gjw_java的博客
08-26 2744
基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动，以及文字在图片上缩略显示和全部显示。
用vue实现一个仿简书的轮播图效果
IT_studied的博客
05-12 319
先展示最终效果： 解决思路： vue的理念是以数据驱动视图，所以拒绝通过改变元素的margin-top来实现滚动效果。 写好css样式，只需改变每张图片的class即可实现轮播效果。可以将轮播图看成两个，如图所示： 代码实现： 各个slide的样式： $width:800px;//容器宽度 $height:300px;//容器高度 $bWidth:500px;//大图片宽度 $sWidth:$width-$bWidth;...
vue iview多张图片大图预览、缩放翻转
10-16
主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现点击图片放大效果
08-29
主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
01-19
用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。 从0.x迁移 你需要做的唯一改动就是手动引入样式文件： import 'viewerjs/dist/viewer.css' 安装 使用npm命令安装 npm install v-viewer 使用...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
culiao9310的博客
09-28 2626
vue带缩略图的轮播图插件View demo 查看演示Download Source 下载源Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s ...
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
08-30
主要介绍了vue2实现移动端上传、预览、压缩图片解决拍照旋转问题,需要的朋友可以参考下
vue3.2中使用swiper缩略图轮播教程
Shivy_的博客
02-21 1552
vue3.2中使用swiper缩略图轮播教程
vue中使用swiper( vue-awesome-swiper4.0及以上版本)缩略图轮播
lichanzhaifeng的博客
05-29 8043
效果图： 1.npm安装 npm install swiper vue-awesome-swiper --save vue-awesome-swiper4.0以上版本一定要swiper 和 vue-awesome-swiper4.0一起安装，否则会报错 2.组件里调用完整代码 <template> <div class="thumb-example"> <!-- swiper1 --> <swiper class="swiper galler
Vue实现轮播图
cuber-lotus的博客
07-15 9557
Vue实现轮播图 先上总代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
h5移动端vue手势插件，元素图片缩放、旋转拖拉拖拽手势事件
凌晨冲锋者的博客
07-17 7095
h5移动端手势操作图片dom缩放，拖拽插件
基于vue实现图片的放大，缩小，旋转，拖拽功能
夕阳的云的博客
12-11 9379
今天加班先来无事，写了一个弹窗查看图片，具有放大，缩小，旋转，拖拽功能。 1、html部分 <template> <!-- 查看图片放大组件 --> <div id="look-image" v-if="visible"> <!-- 图片展示区 --> <div class="look-image...
vue实现图片的拖拽预览和放大缩小
YoungtiNine的博客
08-05 701
html <div class="img-preview" v-else-if="fileType === 'image'" ref="imgPreviewRef"> <img :src="src" alt ref="imgRef" :style="`transform:scale(${imgScaleSize})`" /> </div> <div class="img-opt-btn"> <el-button c
vue图片放大缩小：onwheel
m0_70722541的博客
04-27 1474
vue-photo-preview（放大和缩小、切换上下张等功能）vue-picture-preview（预览和切换上下张功能）viewerjs（放大和缩小、切换上下张等功能）实现图片的放大缩小，可以采用插件。2.在mounted里写放大缩小的方法。1.给img标签绑定一个id。
vue2 点击图片放大预览
05-13
可以使用第三方插件vue-preview来实现图片的放大预览。 首先，安装vue-preview插件： ``` npm install vue-preview --save ``` 然后，在需要使用的组件中引入并注册vue-preview： ```javascript import VuePreview from 'vue-preview' // 注册插件 Vue.use(VuePreview) ``` 最后，在模板中使用vue-preview组件来展示图片： ```html <vue-preview :slides="slides"> <img v-for="(item, index) in images" :src="item" :key="index"> </vue-preview> ``` 其中，slides是一个数组，用于配置预览时的参数，例如： ```javascript data() { return { images: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg'], slides: [ { src: 'https://example.com/image1.jpg' }, { src: 'https://example.com/image2.jpg' }, { src: 'https://example.com/image3.jpg' } ] } } ``` 这样就可以实现点击图片放大预览了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值