在我们开发后台里面我们经常会用到点击图片放大的功能，然后实现这个功能如果自己手写的腑尸倚匝话需要花费的时间又比较的多，而且思考的层面可能没有那么的深，随时都会需求发生改变还需要继续扩展！这个时候我摩学固椹们就需要使用一个插件来达到快速开发
工具/原料
VisualStudioCode
vue2.0+elementui+v-viewer
方法/步骤
1、首先我们来看下今天的主角【v-viewer】，v-viewer提供点击下一张，上一张，旋转，自动播放，放大等一些我们常用的功能，效果见图
2、现在我们开始安装这个组件到我们的项目里面，命令面板里面我们需要执行一个安装命令【npminstallv-viewer--save】
3、安装完之后我们在vu娣定撰钠e项目里面的main.js需要对这个组件进行引用importViewerfrom&垆杪屑丝#39;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、到了这里我们基本就把【v-view娣定撰钠er】这个组件放在我们的项目里面。在未来我们需要进行使用的时候，只要在在页诹鬃蛭镲面上面直接用就好了，首先在模板里面加上HTML代码<viewer:images="arrayList"><imgv-for="(src,index)inarrayList":src="src":key="index"class="pro-img"></viewer>这里的【arrayList】是使用者自己定义的一个数组，这里特别的主意一定要是变量，如果你的图片后台返回的不是一个变量，你就需要自己把它进行一个组装成数组就好了，图片给的是我目前在使用的代码，大家看的时候要结合起来一起理解一下
5、好了，到这里就们就实现了点击图片放大的功能了！
