根据项目需求，我们的ui框架是elementUI。要求实现轮播图并且点击当前轮播图片放大的效果。实现图片放大vue是有一个插件的，npm插件就可以了。
1.首先，安装依赖
npm install v-viewer --save
2.main.js引入viewer
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.html (我这里的数据是动态的)，这个是和elementui中组件carousel一起用的
</el-carousel>
<el-carousel-item v-for="item in imgs" v-bind:key="item.url">
<viewer :images="imgs">
<img
:src="item.url"
class="img"
>
</viewer>
</el-carousel-item>
</el-carousel>
因为我移动端页面底下还有点击图片放大的功能，所以单独使用插件实现图片放大可以这样实现
<viewer :images="imgs">
<img
v-for="(src,index) in imgs"
:src="src.url"
:key="index"
class="img-qr"
>
</viewer>
4.js
data(){
return{
imgs:[
{url:require('../../../assets/img/1.jpg')},
{url:require('../../../assets/img/2.jpg')},
{url:require('../../../assets/img/3.jpg')}
]
}
}
