VUE中点击图片放大

在我们开辟后台里面我们经常会用到点击图片放大的功能，然后实现这个功能若是本身手写的话需要破费的时候又比力的多，并且思虑的层面可能没有那么的深，随时城市需求发生改变还需要继续扩展！这个时辰我们就需要利用一个插件来达到快速开辟

东西/原料

• Visual Studio Code
• vue2.0+element ui+v-viewer

方式/步调

1. 1

   起首我们来看下今天的本家儿角【v-viewer】，v-viewer供给点击下一张，上一张，扭转，主动播放，放大等一些我们常用的功能，结果见图

   
2. 2

   此刻我们起头安装这个组件到我们的项目里面，号令面板里面我们需要执行一个安装号令【npm install v-viewer --save】

   
3. 3

   安装完之后我们在vue项目里面的main.js需要对这个组件进行引用

   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' }

   })

   
4. 4

   到了这里我们根基就把【v-viewer】这个组件放在我们的项目里面。在将来我们需要进行利用的时辰，只要在在页面上面直接用就好了，起首在模板里面加上HTML代码

   <viewer :images="arrayList">

   <img

   v-for="(src,index) in arrayList"

   :src="src"

   :key="index"

   class="pro-img"

   >

   </viewer>

   这里的【arrayList】是利用者本身界说的一个数组，这里出格的本家儿意必然如果变量，若是你的图片后台返回的不是一个变量，你就需要本身把它进行一个组装当作数组就好了，图片给的是我今朝在利用的代码，大师看的时辰要连系起来一路理解一下

   
5. 5

   好了，到这里就们就实现了点击图片放大的功能了！

   

注重事项

• 遍历的时辰必然要弄当作一个数组，可能数组对象也可以，我没有测验考试，大师可以去尝尝
• 按照步调走的话，根基是没有问题的
• 感觉不错的话，记得投个票哦