vue+elementui 轮播图+图片放大效果

根据项目需求，我们的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一起用的

   

        

           

             

                :src="item.url"

                class="img"

              >

           

         

   

因为我移动端页面底下还有点击图片放大的功能，所以单独使用插件实现图片放大可以这样实现

               

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

                  :src="src.url"

                  :key="index"

                  class="img-qr"

                >

   

4.js

data(){

            return{

                imgs:[

                    {url:require('../../../assets/img/1.jpg')},

                    {url:require('../../../assets/img/2.jpg')},

                    {url:require('../../../assets/img/3.jpg')}

                ]

            }

        }