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

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;
  }
}

就好了
附上代码