自研Vue放大镜组件（亲测可用无缺陷）

<template>
    <div class="vab-magnifier">
        <div class="image-box">
            <img class="image" :src="imgData" />
            <div class="magnifier" id="magnifier"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['imgData'],
    mounted() {
        this.init()
    },
    methods: {
        init() {
            // 获取需要操作的元素
            const image = document.querySelector('.image')
            const magnifier = document.getElementById('magnifier')
            const imageUrl = image.src
            // 鼠标移入图片时显示放大镜
            image.addEventListener('mouseover', function () {
                magnifier.style.visibility = 'visible'
            })
            // 鼠标移出图片时隐藏放大镜
            image.addEventListener('mouseout', function () {
                magnifier.style.visibility = 'hidden'
            })
            // 鼠标移动时实现放大镜效果
            image.addEventListener('mousemove', function (e) {
                // 获取放大镜和图片的宽度和高度
                const magnifierWidth = magnifier.offsetWidth
                const magnifierHeight = magnifier.offsetHeight
                const imageWidth = image.offsetWidth
                const imageHeight = image.offsetHeight
                // 将放大镜的背景图片放大两倍，使用两倍的图片大小以保证明显的放大效果
                const magnifierBackgroundSize = `${imageWidth * 2}px ${imageHeight * 2}px`
                // 获取鼠标在图片上的位置坐标
                const offsetX = e.offsetX
                const offsetY = e.offsetY
                // 计算放大镜需要移动的位置
                const positionX = offsetX - magnifierWidth / 2
                const positionY = offsetY - magnifierHeight / 2
                // 计算图片背景的偏移量，这样放大的部分能够与原图对应
                const backgroundPositionX = -positionX * 2
                const backgroundPositionY = -positionY * 2
                // 将计算出的值应用于放大镜元素属性
                magnifier.style.background = `url(${imageUrl})`
                magnifier.style.backgroundSize = magnifierBackgroundSize
                magnifier.style.left = `${positionX}px`
                magnifier.style.top = `${positionY}px`
                magnifier.style.backgroundPositionX = `${backgroundPositionX}px`
                magnifier.style.backgroundPositionY = `${backgroundPositionY}px`
            })
        },
    },
}
</script>

<style scoped lang="less">
.vab-magnifier {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.image-box {
    position: relative;
}

.image {
    display: block;
    max-width: 100%;
    height: 100%;
}
.magnifier {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 50%;
    pointer-events: none;
    visibility: hidden;
    z-index: 1;
}
</style>