vue实现简单放大镜效果

<template>    <div>        <div class="imgMerror">            <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()">                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="">                <div class="imgMask"></div>            </div>            <div class="bigDiv">                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="" class="bigImg">            </div>        </div>    </div></template><script>export default {    data() {        return {                    }    },    methods: {        enter(){            let imgMaskDom = document.querySelector('.imgMask');            let bigDivDom = document.querySelector('.bigDiv');            imgMaskDom.style.display = 'block';            bigDivDom.style.display = 'block';        },        leave(){            let imgMaskDom = document.querySelector('.imgMask');            let bigDivDom = document.querySelector('.bigDiv');            imgMaskDom.style.display = 'none';            bigDivDom.style.display = 'none';        },        move(e){            let smallDivDom = document.querySelector('.smallDiv');            let imgMaskDom = document.querySelector('.imgMask');            let bigDivDom = document.querySelector('.bigDiv');            let bigImgkDom = document.querySelector('.bigImg');             let ev = e || window.event;            let left = ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth/2;            let top = ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight/2;            if(left < 0) left=0;            if(left > smallDivDom.offsetWidth - imgMaskDom.offsetWidth){                left = smallDivDom.offsetWidth - imgMaskDom.offsetWidth;            }            if(top < 0) top=0;            if(top > smallDivDom.offsetHeight - imgMaskDom.offsetHeight){                top = smallDivDom.offsetHeight - imgMaskDom.offsetHeight;            }            imgMaskDom.style.left = left + 'px';            imgMaskDom.style.top = top + 'px';             //移动比例            let precentX = left / (smallDivDom.offsetWidth-imgMaskDom.offsetWidth);            let precentY = top / (smallDivDom.offsetHeight-imgMaskDom.offsetHeight);            bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px';            bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px';         }    },}</script> <style lang="scss">    *{        margin: 0;        padding: 0;    }    .imgMerror{        position: relative;        padding: 50px;        .smallDiv{            border: 1px solid #ccc;            width: 360px;            height: 360px;            position: relative;            left: 0;            top: 0;            img{                width: 100%;                height: 100%;            }            .imgMask{                width: 240px;                height: 240px;                background: #00ff98;                opacity: 0.5;                cursor: move;                position: absolute;                left:0;                top: 0;                display: none;            }        }        .bigDiv{            border: 1px solid #ccc;            width: 540px;            height: 540px;            position: relative;            left: 380px;            top: -360px;            overflow: hidden;            display: none;            img{                width: 600px;                height: 600px;                position: absolute;                left: 0;                top: 0;            }        }    }</style>