根據(jù)項目需求，我們的ui框架是elementUI。要求實現(xiàn)輪播圖并且點擊當前輪播圖片放大的效果。實現(xiàn)圖片放大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 (我這里的數(shù)據(jù)是動態(tài)的)，這個是和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>

因為我移動端頁面底下還有點擊圖片放大的功能，所以單獨使用插件實現(xiàn)圖片放大可以這樣實現(xiàn)

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

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? }

? ? ? ? }