基于vue2.x的电商图片放大镜插件的使用 - 行业资讯 - 肥雀云

最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。

<强> vue-piczoom
　　

图片放大镜Vue组件。js 2。x
　　

基于vue2。x的电商图片放大镜插件
　　

GIF动画截图

　　#安装安装　　npm安装vue-piczoom——保存　　　　

使用使用
　　

——脚本
　　

　　　　　　从“vue-piczoom”进口PicZoom 　　出口默认{ 　　名称:“应用程序”, 　　组件:{ 　　PicZoom 　　} 　　} 　　　　

(html
　　

　　　　　　& lt; pic-zoom url="静态/imac2.jpg”:规模=?”祝辞& lt;/pic-zoom> 　　　　

<强>配置配置

　　　　　　　　道具　　描述　　默认的　　　　　　　　　　url 　　图片地址　　所需的字符串　　　　　　big-url 　　大图地址　　字符串为空　　　　　　规模　　图片放大倍数　　数字2.5 　　　　　　滚动　　放大时页面是否可滚动　　布尔的意见　　　　　　　　

<强>建议注意事项
　　

组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如:

　　　　　　& lt; div类=皃ic-box”比;& lt; !——pic-box:宽度:500 px;高度:500 px——比; 　　& lt; pic-zoom url="静态/imac2.jpg”:规模=?”祝辞& lt;/pic-zoom> 　　& lt;/div> 　　　　

演示示例:在线示例https://826327700.github.io/vue-piczoom/dist/

Github: https://github.com/826327700/vue-piczoom
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。