实现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 // 注册

},

}