实现vue图片放大镜效果

最近想要实现图片放大镜的效果，

-首先使用的是原生js+css的方法：参考https://blog.csdn.net/sinat_34849421/article/details/106074482

这个方法功能倒是可行，但是这个方式在跳出这个页面时会报 Uncaught TypeError: Cannot read properties of undefined (reading ‘getBoundingClientRect‘) 错误

-使用vue-piczoom插件进行处理：参考https://blog.csdn.net/qq_39400014/article/details/105511003

但是这个方式在导入 vue-piczoom依赖的时候会报错，导入不了，所以也不行(如果可以导入，最好使用这个方式，因为vue-piczoom功能还是比较全面的，而且各种资料文档也比较齐全)

-使用 ht-image-zoomer插件：参考https://blog.csdn.net/weixin_59719549/article/details/122994161

npm install ht-image-zoomer

引入:

import ImgZoom from 'ht-image-zoomer'

html:

<img-zoom class="zoomIMg" src="https://t12.baidu.com/it/u=2749264489,203508479&fm=30&app=106&f=JPEG?w=640&h=644&s=F128B95418F1D3E34701045C030050E2" alt="" />

script:

export default {   name: 'imageMagnifier',   data() {     return {         imgsList:'https://img-home.csdnimg.cn/images/20201124032511.png'     }   },   components: {     ImgZoom // 注册   }, }

这个插件的缺点就是，没有很多的参考资料，功能没有piczoom那么多