vue插件之vue-piczoom 图片放大镜介绍

一、简单说明

自己最近在做产品详情页面的时候，需要实现图片放大这么一个功能，因为偷懒，就在网上找了一个插件，想跟大家分享一下。今天分享的主角是vue-piczoom，它是基于vue2.x的电商图片放大镜插件。

二、vue-piczoom介绍

使用介绍（注：安装需要npm，不了解的小伙伴可以点这里）

# 安装 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>

配置

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

注意事项

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

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

以上部分都是我搬砖搬过来（手动滑稽）。还有要告诉小伙伴们的是放大后的图片定位是位于body标签的，这点要注意！还有想要了解更多的小伙伴可以点参考文章，查看更多

参考文章：[vue插件]基于vue2.x的电商图片放大镜插件，vue-piczoom