vue仿淘宝放大镜插件 vue-piczoom的使用问题

最新推荐文章于 2024-09-13 22:28:36 发布

秃子代码

最新推荐文章于 2024-09-13 22:28:36 发布

阅读量2.4k

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qimingxing1306/article/details/122089371

版权

vue仿淘宝放大镜插件 vue-piczoom

npm install vue-piczoom--save //下载放大镜插件

在这里插入图片描述
使用的话就是直接引入

import picZoom from 'vue-piczoom'

然后注册组件

components: {picZoom  },

然后使用

 <pic-zoom v-if="detailImg" :url="detailImg" :scale="3"></pic-zoom>

在这里插入图片描述

vue-piczoom插件下载报错

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-import’

这是版本不兼容的问题可能是作者忘记做兼容了所以我们要按版本下载
在这里插入图片描述

npm install postcss-import@12.0.1

切记需要这个版本
然后你会继续报错
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-url’
在这里插入图片描述

npm install postcss-url@8.0.0

一样的按这个版本去下载不然会用不了
如果报错了vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Migration guide for end-users:的话
在这里插入图片描述
那就继续下

npm install postcss-import@5.1.1

重启一下项目就好了
就不会报错能用了
在这里插入图片描述

第一次进入放大镜失效原因

有时候我们第一次进入的时候放大镜无法使用
可能是没有获取到值加个v-if就好了
在这里插入图片描述

但是放大镜的位置可能不太好所以我们要在全局样式里面设置

在这里插入图片描述
所以我们要在全局加上样式

.mouse-cover-canvas {
  position: absolute;
  left: 810px !important;
  top: 180px !important;
}
.magnifier-box {
  overflow: hidden !important;
  img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain;
  }
}

在这里插入图片描述
就好了
附上代码