最近有做一个PC端的简单官网,主要是进行商品的展示,目前没有收藏,加入购物车,购买的功能,商品详情页有商品图片,各种详细信息的展示,原型上是没有放大镜的功能的,当时有空余时间,我就想着试试放大镜的效果吧,js可以实现,但是网上页有各种插件,不用白不用,那就用插件吧

// 1,,,安装插件vue-piczoom
npm install vue-piczoom --save// 2,,,局部引用(哪个页面需要用,在哪个页面引入)
import PicZoom from 'vue-piczoom'
export default {name: '对应页面name',components: { PicZoom },data:{xxx}
}// 3,,,页面引用
// 组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。
<div class="bigImg"> <!-- bigImg:width:420px;height:420px;--><pic-zoom url="../../assets/img/pro1.jpg" :scale="2"></pic-zoom>
</div>

亲测可用哦

参考链接: https://www.jb51.net/article/133409.htm