vue项目中实现放大镜效果

在vue项目中可以用插件达到商城那个放大镜效果，当然也可以自己写方法，但想到快速的实现此功能就可以直接使用插件。

下载安装插件：npm i PicZoom --save
在要使用的地方引入：import PicZoom from “vue-piczoom”; components: {
PicZoom
},

 <div class="showimg">
      //要放大的图片,最好用盒子装起来
      <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
</div>
<ul>
     //可供选择的小图片
     <li v-for="(item,index) in imgList" :key="index" @click="changeImage(index)">
        <img :src="item">
     </li>
</ul> 
<script>
  changeImage(index) {
     console.log(index);
     this.imgurl = this.imgList[index];
  }       
</script>

原文链接：https://blog.csdn.net/organ_sweet/article/details/104664378/