vue爬坑之PicZoom插件,实现商品放大镜

我自己用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>

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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值