【Vue.js商品详情放大镜】最近在做一个购物网站的小项目,做到商品详情页面图片放大镜(淘宝天猫吧鼠标放到图片上会放大看细节),如果手写的话需要变更本来写好的很多东西.查过资料后发现有一个依赖包,很方便,本文为大家介绍这个小插件PicZoom先来一张效果图
文章图片
首先第一步要下载该插件：npm install vue-piczoom --save
然后在引用也导入
import PicZoom from 'vue-piczoom'
文章图片
然后在组件中使用
文章图片
html中的内容为(注意标签名和路径,不是img和src而是)
文章图片
注意的是你全部都操作了之后可能不会正确显示图片和效果。原来img标签要改为pic-zoom,并且属性src要改为url
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例