Comment implémenter la fonction zoom d'une zone spécifique d'une image via Vue ?

Comment implémenter la fonction de grossissement d'une zone spécifique de l'image via Vue ?

Introduction :
Dans la conception et le développement de sites Web, nous rencontrons souvent des situations où nous devons afficher des images plus grandes. Afin d'offrir une meilleure expérience utilisateur, les utilisateurs sont souvent censés zoomer sur certaines zones pour afficher les détails. Cet article présentera comment implémenter la fonction de zoom de zones spécifiques de l'image via Vue, afin que les utilisateurs puissent facilement visualiser les détails de l'image.

Préparation technique :
Avant d'implémenter cette fonction, vous devez préparer les outils techniques suivants :

1. Vue.js : un framework JavaScript pour créer des interfaces utilisateur interactives.
2. Vue Router : utilisé pour gérer la navigation entre les différentes pages du site.
3. Style CSS : utilisé pour contrôler la mise en page et les styles d'image.

Étape 1 : Créer un projet Vue
Tout d'abord, nous devons créer un projet Vue. Si vous avez déjà un projet Vue existant, vous pouvez ignorer cette étape. Ouvrez le terminal, entrez dans le répertoire du projet et exécutez la commande suivante :

vue create picture-zoom
cd picture-zoom

Étape 2 : Créer un itinéraire
Ensuite, nous devons créer un itinéraire pour gérer la navigation des différentes pages. Créez un fichier router.js dans le répertoire src et ajoutez le code suivant dans le fichier :

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;

Étape 3 : Créer des composants de page
Maintenant, nous devons créer deux composants de page, un pour afficher la page d'accueil et un pour afficher l'image. Fonction grossissement. Créez les fichiers Home.vue et Picture.vue dans le répertoire src/components et ajoutez respectivement le code suivant :

Home.vue:

<template>
  <div>
    <h1 id="首页">首页</h1>
    <router-link to="/picture">点击查看图片</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

Picture.vue:

<template>
  <div>
    <h1 id="图片放大">图片放大</h1>
    <div class="picture-container">
      <div class="zoom-container">
        <img  src="/static/imghw/default1.png"  data-src="pictureSrc"  class="lazy"  : @mousemove="showZoom" @mouseout="hideZoom" alt="Comment implémenter la fonction zoom d'une zone spécifique d'une image via Vue ?" >
        <div v-show="showZoomBox" class="zoom-box" :style="{ top: zoomTop + 'px', left: zoomLeft + 'px' }">
          <img  src="/static/imghw/default1.png"  data-src="pictureSrc"  class="lazy"  : :  style="max-width:90%"translate(-' + zoomLeft * zoomRatio + 'px, -' + zoomTop * zoomRatio + 'px)' }" alt="Comment implémenter la fonction zoom d'une zone spécifique d'une image via Vue ?" >
        </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>

Étape 4 : Exécuter le projet
Enfin, nous avons besoin pour acheminer Ajoutez-le à l'instance Vue et exécutez le projet. Ajoutez le code suivant au fichier src/main.js :

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');

Ensuite, exécutez la commande suivante pour démarrer le projet :

npm run serve

Conclusion :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de zoom avant sur une zone spécifique de ​​l'image via Vue. Les utilisateurs peuvent déplacer la souris sur l'image dans la page Image pour voir les détails de l'image dans la zone agrandie. J'espère que cet article vous sera utile, merci !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!