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-carousel
            type="card"
            height="70px"
            :autoplay="false"
            indicator-position="none"
            @change="changeImg">
            <el-carousel-item
              v-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)