如何通过Vue实现图片的特定区域放大功能？

vue create picture-zoomcd picture-zoom

import Vue from 'vue';import VueRouter from 'vue-router';// 导入相关页面组件import Home from './components/Home.vue';import Picture from './components/Picture.vue';Vue.use(VueRouter);const routes = [  { path: '/', component: Home },  { path: '/picture', component: Picture },];const router = new VueRouter({  routes,});export default router;

<template>  <div>    <h1>首页</h1>    <router-link to="/picture">点击查看图片</router-link>  </div></template><script>export default {  name: 'Home',};</script>

<template>  <div>    <h1>图片放大</h1>    <div class="picture-container">      <div class="zoom-container">        @@##@@        <div v-show="showZoomBox" class="zoom-box" :style="{ top: zoomTop + 'px', left: zoomLeft + 'px' }">          @@##@@        </div>      </div>    </div>  </div></template><script>export default {  name: 'Picture',  data() {    return {      pictureSrc: 'your-picture-url.jpg',      showZoomBox: false,      zoomTop: 0,      zoomLeft: 0,      zoomRatio: 2,    };  },  methods: {    showZoom(event) {      this.showZoomBox = true;      this.zoomTop = event.offsetY - 50;      this.zoomLeft = event.offsetX - 50;    },    hideZoom() {      this.showZoomBox = false;    },  },};</script><style scoped>.picture-container {  display: flex;  justify-content: center;}.zoom-container {  position: relative;}.zoom-box {  position: absolute;  width: 100px;  height: 100px;  border: 2px solid red;  overflow: hidden;}.zoom-box img {  width: 100%;  height: auto;}</style>

import Vue from 'vue';import App from './App.vue';import router from './router';Vue.config.productionTip = false;new Vue({  router,  render: (h) => h(App),}).$mount('#app');

npm run serve