Vue 实现图片放大镜

最近有项目需要用到对图片进行局部放大，类似淘宝商品页的放大镜效果，经过一番研究功能可用：

HTML部分

<template>
    <div>
        <div class="choose" ref="choose">
            <div class="content" ref="content" @mousemove="handleMove" @mouseout="handleOut">
                <img src="/static/bg.jpg" />
                <div class="shadow" ref="shadow"></div>
            </div>
            <ul id="listshow">
                <li class="selected">
                    <img src="/static/bg.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="larger" ref="larger">
            <img src="/static/bg.jpg" ref="big" />