element+vue 之图片放大器

1.安装插件

npm install vue-photo-zoom-pro

2.main.js导入

// 放大镜
import VuePhotoZoomPro from 'vue-photo-zoom-pro'
Vue.use(VuePhotoZoomPro)

3.页面使用

     <vue-photo-zoom-pro:url="imgUrl":out-zoomer="true":scale="2"style="width: 368px; height: 368px; margin-right: 30px"><template slot="zoomer"><div class="ks-imagezoom-wrap"/></template></vue-photo-zoom-pro><div style="width: 368px; margin-top: 10px"><el-carouseltype="card"height="70px":autoplay="false"indicator-position="none"@change="changeImg"><el-carousel-itemv-for="(item, index) in imgList":key="index"style="text-align: center"><img width="70px" height="70px" :src="item"/></el-carousel-item></el-carousel></div>changeImg(val) {this.imgUrl = this.imgList[val];},```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c0d67199084d4817a41529e5abee6129.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fdc3879fce774218b1191f5f13e06fc5.png)