Conseils et bonnes pratiques pour implémenter la fonction d'aperçu d'image dans Vue

Vue est un framework JavaScript populaire pour créer des applications à page unique (SPA). L'aperçu des images est une fonctionnalité courante dans les applications Web, et il existe de nombreuses façons d'implémenter l'aperçu des images dans Vue. Cet article présentera en détail les techniques et les meilleures pratiques pour implémenter la fonction de prévisualisation d'image dans Vue.

1. Utilisez le plug-in Vue

Le plug-in Vue fournit un moyen simple d'obtenir un aperçu de l'image. Les plugins Vue peuvent être enregistrés globalement afin de pouvoir être utilisés dans toute l'application. Voici deux plug-ins Vue couramment utilisés, Lightbox et vue-gallery.

1. Lightbox

Lightbox est une bibliothèque JavaScript légère très populaire qui peut être utilisée pour afficher des images et leurs descriptions. Lightbox fonctionne comme un calque contextuel, affichant une image tout en faisant disparaître d'autres parties.

Dans Vue, vous pouvez utiliser le plug-in Vue Lightbox Gallery pour obtenir l'effet Lightbox. La méthode d'utilisation est la suivante :

Installer le plugin :

npm install vue-lightbox-gallery --save

Global Registration Plugin : #🎜 🎜## 🎜🎜#import VueLightboxGallery depuis 'vue-lightbox-gallery'

Vue.use(VueLightboxGallery)

Utilisez le plugin dans le composant :

< ;vue-lightbox -gallery

:groups="lightboxGroups"

group-text="Photo%num% sur %total%"
hide-overlay-on-close
 : show-close-button="false"
:show-image-number="false"
/>

where lightboxGroups est un tableau contenant les images à prévisualiser. Vous pouvez ajouter une URL et une description du groupe d'images. group-text est la description du groupe d'images affiché, %num% sera automatiquement remplacé par le numéro de série de l'image et %total% sera automatiquement remplacé par le nombre total d'images. hide-overlay-on-close est utilisé pour masquer le masque d'arrière-plan après la fermeture de Lightbox. show-close-button et show-image-number sont utilisés pour contrôler s'il faut afficher ou masquer le bouton de fermeture et le nombre d'images.

2.vue-gallery

vue-gallery est un composant de galerie basé sur Vue.js. Il fournit une interface utilisateur flexible et facile à utiliser pour rendre votre photothèque plus belle. Il dispose de nombreuses options de personnalisation pour s'adapter à différents scénarios d'application.

Installer le plugin :

npm install vue-gallery --save

Utiliser le plugin dans le composant :

< ; vue-gallery :images="images"/>

Parmi eux, images est un tableau contenant des informations sur l'image qui doivent être prévisualisées. Chaque image doit contenir une URL, un titre, une description, une largeur et une hauteur.

2. Utilisez du JavaScript pur

Bien que l'utilisation du plug-in Vue soit un moyen plus efficace, la fonction d'aperçu de l'image peut également être réalisée en utilisant du JavaScript pur. Voici quelques conseils et bonnes pratiques pour utiliser du JavaScript pur.

Utilisez CSS pour implémenter l'aperçu de l'image

1. Vous pouvez utiliser CSS pour implémenter une simple fonction d'aperçu d'image. Par exemple, utilisez la pseudo-classe :hover pour redimensionner une image à une certaine taille.

/

CSS

/.img-box{ width:200px;
height:200px;
débordement : caché;
}
.img-box img{
transition:tous les .3;
}
.img-box:survoler img{
transformer : scale(1.1);
}

at Dans cet exemple, la classe .img-box définit la largeur et la hauteur du conteneur et utilise overflow: Hidden pour masquer tout débordement. Lorsque la souris survole l'image, l'élément img sera agrandi via l'attribut transform:scale().

Cette méthode de mise en œuvre est très portable et très simple à utiliser.

Utilisation de la bibliothèque JavaScript

2. En plus de Vue, les bibliothèques JavaScript peuvent également être utilisées pour implémenter l'aperçu des images. Vous trouverez ci-dessous deux bibliothèques JavaScript qui permettent divers effets d'aperçu d'image. PhotoSwipe est une bibliothèque JavaScript puissante et flexible permettant de créer des bibliothèques d'images et de vidéos réactives. Il prend en charge les fonctions de balayage, de zoom et de rotation et est également disponible sur les appareils de bureau et mobiles.

Installer PhotoSwipe :

npm install photoswipe --save
• Importer le CSS et le code nécessaires :

import' photoswipe /dist/photoswipe.css'

import 'photoswipe/dist/default-skin/default-skin.css'

import PhotoSwipe depuis 'photoswipe'

import PhotoSwipeUI_Default depuis 'photoswipe/dist/ photoswipe -ui-default'

//Initialize PhotoSwipe

const photoswipe = new PhotoSwipe(

pswpElement,

PhotoSwipeUI_Default,
items,
options
)

Parmi eux, pswpElement est l'élément DOM contenant l'interface utilisateur de la galerie de photos, items est un tableau contenant les informations sur la photo à prévisualiser et options sont les options et les paramètres.


Viewer.js


Viewer.js est une puissante bibliothèque JavaScript permettant de créer des visionneuses d'images. Il prend en charge une grande variété de types de fichiers et active des fonctions telles que le zoom avant, le zoom arrière, la rotation et le retournement.

Install Viewer.js :

npm install viewerjs --save
• Utilisation :

// Importer CSS # 🎜🎜#import 'viewerjs/dist/viewer.min.css'

// Importer JS

import Viewer from 'viewerjs'

// Initialiser Viewer.js#🎜 🎜 #const viewer = new Viewer(img, options)

Parmi eux, img est l'élément DOM contenant l'image, et options sont les options et les paramètres.

résumé

La mise en œuvre de la fonction d'aperçu d'image dans Vue n'est pas une tâche difficile. Dans Vue, des bibliothèques et plug-ins JavaScript tiers peuvent être utilisés pour obtenir divers effets. Dans le même temps, il peut également être implémenté en utilisant la technologie JavaScript pure. Lorsque vous choisissez une méthode adaptée à votre application, vous devez prendre en compte des problèmes tels que l'efficacité, la portabilité et la convivialité.

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!