Vue项目的商品放大镜

如何简单快速的在Vue项目中实现商品放大镜？

01.介绍插件（vue-piczoom）

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

02.使用方法

// 首先使用npm下载
npm install vue-piczoom --save

//具体使用方法
<template>
  <div class="app">
    <div class="container">
//组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。
      <pic-zoom url="../../static/img/goodslist/gl_1.png" :scale="3"/>
    </div>
  </div>
</template>

<script>
//引入插件
  import PicZoom from 'vue-piczoom'
  export default {
    name: "App",
    components: {PicZoom}
  }
</script>
<style scped>
	.container{
		width:300px;
		height:300px;
	}
</style>

03.插件的参数

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

04.其他方法

链接: 任意门.