vue3写法，放大镜的实现

<template>
        <div class="w-[100%] h-[100%] max-w-[500px] max-h-[500px] relative" @mouseenter="show" @mouseleave="hide" @mousemove="move" ref="left">
            <img 
                class="transition-transform duration-100  w-full h-full"
                src="/text/12.jpg"
                ref="minImage"
            />
            <span v-show="isshow" class="w-[250px] h-[250px] absolute left-0 top-0 cursor-zoom-in border-2 border-white shadow-lg" ref="mask"></span>
        </div>

        <!-- 放大图片容器 -->
        <div 
            v-show="isshow"
            class="absolute w-full h-full  max-w-[500px] max-h-[500px] border border-gray-200 overflow-hidden"
            ref="right"
        >
            <img
                class="absolute   max-w-[200%] h-[200%] left-0 top-0"
                src="/text/12.jpg"
                ref="bigImage"
            />
        </div>
</template>

<script setup>
import { ref } from 'vue'

const isshow = ref(false)
// 左边的容器
const left=ref(null)
const right=ref(null)
const mask=ref(null)
const bigImage=ref(null)

const show = () => { isshow.value = true }
const hide = () => { isshow.value = false }

const move = (e) => { 
    // 计算遮罩层在容器内的绝对位置（中心对齐，减去自身一半尺寸）
    let x = e.clientX - left.value.offsetLeft - mask.value.offsetWidth / 2
    let y = e.clientY - left.value.offsetTop - mask.value.offsetHeight / 2
    if(x<0){
        x=0
    }
    if(y<0){
        y=0
    }
    if(x>250){
        x=250
    }
    if(y>250){
        y=250
    }
    mask.value.style.left = x + 'px'
    mask.value.style.top = y + 'px'
    let imageLeft = x * (bigImage.value.width-500)/(500-250)
    let imageTop = y * (bigImage.value.height-500)/(500-250)
    bigImage.value.style.left = -imageLeft + 'px'
    bigImage.value.style.top = -imageTop + 'px'

}
</script>

<style lang="scss" scoped>
</style>