最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的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.优化移动算法,移动选区更流畅;

本文固定链接: http://www.js-code.com/vue-js/vue-js_24900.html