我自己用vue做的一个前后端分离的商城项目，最近刚好需要实现商品放大镜，所以就用了这个vue的PicZoom插件。以下是实现效果：

以下是代码：
首先第一步要下载该插件：npm install vue-piczoom --save
然后你需要有PicZoom组件，该组件的下载地址是GitHub
这些都拥有了之后就按下面代码操作。注意的是你全部都操作了之后可能不会正确显示图片和效果。原来img标签要改为pic-zoom,并且属性src要改为url。下载的GitHub项目的rotate.png图片也要粘到自己项目，不要会报错。其余的报错，你们自己看控制台（F12）解决吧。另外如果放大效果一闪一闪的，说明是样式图片宽高的问题，这个就得自己慢慢去调了哦。

shopItem.vue,html页面：
<div class="item-pic magnifier-box">
	<pic-zoom :url="info.src" :scale="3"></pic-zoom>
</div>
<script>
	import PicZoom  from './PicZoom.vue'
	export default {
		data() {
			return {
				msg: '我是子组件的msg',
				list:[],
				info:{},
				addList,
				value:'',
				num:1
			}
		},components:{
			PicZoom
		}
	}
</script>

好了，以上就是全部代码了。希望可以帮助到你们。