Comment implémenter l'aperçu de l'image avec le plug-in vue

Présentation

Vue est actuellement l'un des frameworks front-end les plus populaires et peut être utilisé pour créer des projets SPA (Single Page Application). Dans Vue, il est parfois nécessaire d'implémenter la fonction d'aperçu d'image. Cet article explique comment utiliser le plug-in vue pour implémenter l'aperçu d'image.

Présentation du plug-in

Le plug-in Vue est une instance Vue réutilisable qui peut être injectée dans l'application Vue. Les plug-ins sont écrits en ajoutant des méthodes ou des composants aux propriétés du prototype de Vue ou aux propriétés d'instance de Vue, qui peuvent être facilement utilisées n'importe où dans l'application Vue. Les bibliothèques de plug-ins Vue couramment utilisées incluent Vue-Router, Vuex, etc. Ces plug-ins peuvent aider les développeurs à gérer plus facilement l'état et le routage des applications Vue.

vue-preview est une bibliothèque de composants de vue d'aperçu d'image, qui comprend le chargement paresseux d'image, la mise à l'échelle et d'autres fonctions, et prend en charge les opérations d'aperçu sur PC et mobile. vue-preview est développé sur la base de la bibliothèque Vue.js 2.x et prend en charge Vue2.0 et supérieur.

Utilisez le plug-in vue-preview pour implémenter l'aperçu de l'image

Étape 1 : Installez vue-preview

Vous pouvez utiliser npm pour installer vue-preview dans le terminal de ligne de commande :

npm install vue-preview --save-dev

ou utiliser fil pour installer :

yarn add vue-preview

Étape 2 : Dans l'application Vue Introduisez vue-preview dans le fichier d'entrée de l'application Vue :

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

Étape 3 : Utilisez vue-preview dans le composant Vue

Dans le composant Vue, vous pouvez utiliser vue-preview dans ce qui suit façons :

<vue-preview :slides="imageList"></vue-preview>

Parmi eux, les slides sont l'un des attributs props de vue-preview, qui est utilisé pour recevoir la liste d'images. imageList est une variable de tableau utilisée pour stocker l'URL de l'image.

Ce qui suit est le fichier complet du composant Vue :

<script>
import VuePreview from 'vue-preview'

export default {
  name: "Gallery",
  data() {
    return {
      imageList: [
          'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
          'https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg',
          'https://cdn.pixabay.com/photo/2014/10/22/16/38/sunset-498688__340.jpg'
      ]
    };
  },
  components: {
    VuePreview
  }
};
</script>

Dans le code ci-dessus, nous définissons un composant Vue nommé Gallery, définissons la variable imageList via l'attribut data et la transmettons à l'attribut slides du plug-in vue-preview. dans. Référencez le plug-in vue-preview à l'intérieur du composant et enregistrez-le dans l'application Vue.

Étape 4 : Prévisualiser l'effet

Ouvrez le navigateur, exécutez l'application Vue et cliquez sur l'image pour prévisualiser l'effet.

Résumé

Cet article explique comment utiliser le plug-in vue-preview pour implémenter la fonction d'aperçu d'image. L'utilisation de plug-ins Vue peut considérablement améliorer la vitesse et l'efficacité du développement, et éviter de réinventer la roue. Si vous avez besoin de prévisualiser des images, vous pouvez essayer d'utiliser le plug-in vue-preview. Ce plug-in est très simple à utiliser et possède des fonctions riches.

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!