vue爬坑之PicZoom插件，实现商品放大镜

- 日理万妓 2022-02-04 03:37 1442阅读 0赞

我自己用vue做的一个前后端分离的商城项目，最近刚好需要实现商品放大镜，所以就用了这个vue的PicZoom插件。以下是实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]  
以下是代码：  
首先第一步要下载该插件：**npm install vue-piczoom --save**  
然后你需要有PicZoom组件，该组件的下载地址是[GitHub][]  
这些都拥有了之后就按下面代码操作。注意的是你全部都操作了之后可能不会正确显示图片和效果。原来img标签要改为pic-zoom,并且属性src要改为url。下载的GitHub项目的rotate.png图片也要粘到自己项目，不要会报错。其余的报错，你们自己看控制台（F12）解决吧。另外如果放大效果一闪一闪的，说明是样式图片宽高的问题，这个就得自己慢慢去调了哦。

shopItem.vue,html页面：
    <div class="item-pic magnifier-box">
    	<pic-zoom :url="info.src" :scale="3"></pic-zoom>
    </div>
    <script>
    	import PicZoom  from './PicZoom.vue'
    	export default {
    		data() {
    			return {
    				msg: '我是子组件的msg',
    				list:[],
    				info:{},
    				addList,
    				value:'',
    				num:1
    			}
    		},components:{
    			PicZoom
    		}
    	}
    </script>

好了，以上就是全部代码了。希望可以帮助到你们。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: /images/20220204/407475aa8c9c4a0198b20c8ea643fb98.png
[GitHub]: https://github.com/826327700/vue-piczoom

发表评论取消回复

表情：

评论列表（有 0 条评论，1442人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue--爬坑

1.路由变化页面数据不刷新问题；出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系没有达到监听，退出页

╰+哭是因爲堅強的太久メ/ 2023年06月01日 12:51/ 0 赞/ 18 阅读

相关 JavaScript放大镜插件magnifier实现图像放大效果

原文：[JavaScript放大镜插件magnifier实现图像放大效果][JavaScript_magnifier] 源代码下载地址[http://www.zuidaima

红太狼/ 2022年09月21日 05:36/ 0 赞/ 264 阅读

相关 vue项目——商品详情页面图片放大镜效果实现(完成)

昨天在做商品详情页面时，遇到一个需求，就是图片放大镜效果。在图片上鼠标划过时，右侧出现一个大图，用于展示鼠标移过的区域，也就是图片放大镜效果。 ![在这里插入图片描述][7

待我称王封你为后i/ 2022年08月31日 02:27/ 0 赞/ 288 阅读

相关 8、js插件之MagicZoom.js放大镜插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

傷城~/ 2022年06月15日 06:49/ 0 赞/ 348 阅读

相关 5、jQuery插件之jqzoom放大镜插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

待我称王封你为后i/ 2022年06月15日 06:49/ 0 赞/ 312 阅读

相关商品图片放大镜的JavaScript实现

html代码 <div id="content"> <div id="box"> <img src="imgs/1-large

浅浅的花香味﹌/ 2022年05月27日 03:06/ 0 赞/ 293 阅读

相关商品详情页商品放大镜效果

源码下载地址：https://gitee.com/meijunna/lunbo html <!DOCTYPE html PUBLIC "-//W3C//DTD XH

骑猪看日落/ 2022年05月20日 02:50/ 0 赞/ 398 阅读

相关商品放大镜

<!doctype html> <html> <head> <meta charset="utf-8">

小鱼儿/ 2022年05月18日 02:38/ 0 赞/ 294 阅读

相关 vue爬坑之PicZoom插件，实现商品放大镜

我自己用vue做的一个前后端分离的商城项目，最近刚好需要实现商品放大镜，所以就用了这个vue的PicZoom插件。以下是实现效果： ![在这里插入图片描述][waterma

- 日理万妓/ 2022年02月04日 03:37/ 0 赞/ 1443 阅读

相关使用jqzoom插件实现图片放大镜效果

jqzoom插件实现图片放大镜效果。 ![1333548315_2346.png][] 图1.1jqzoom插件实现图片放大镜效果 1、引入jqurty和jqzoo

一时失言乱红尘/ 2021年09月12日 08:42/ 0 赞/ 749 阅读