脚本宝典收集整理的这篇文章主要介绍了

[vue插件]基于vue2.x的电商图片放大镜插件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

vue-piczoom

picture magnifier component for Vue.js 2.x
基于vue2.x的电商图片放大镜插件

GIF 动画截图

zoom2.gif

Build Setup 使用步骤

# 安装 install
npm install vue-piczoom --save
# 使用 use
--script
import PicZoom from 'vue-piczoom'
export default {
  name: 'App',
  components: {
    PicZoom
  }
}

--html
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>

Config 配置

props describe default
url 图片地址 string required
big-url 大图地址 string null
scale 图片放大倍数 number 2.5
scroll 放大时页面是否可滚动 boolean fasle

Suggest 注意事项

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

<div class="pic-box"> <!--pic-box:width:500px;height:500px-->
     <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
</div>

Demo 示例

在线示例

Github

Github

update 更新记录

1.0.4版本:(2018-01-22)

1.更换算法,解决父级元素为position:relative时定位错误;
2.优化边缘检测,解决放大选区移动至边缘时,放大移动失效;
3.优化移动算法,移动选区更流畅;

总结

以上是脚本宝典为你收集整理的

[vue插件]基于vue2.x的电商图片放大镜插件

全部内容,希望文章能够帮你解决

[vue插件]基于vue2.x的电商图片放大镜插件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过