Maison > interface Web > Voir.js > le corps du texte

Utilisez v-viewer combiné avec vue pour prévisualiser l'album

铁手
Libérer: 2021-09-16 19:58:49
original
4401 Les gens l'ont consulté

Récemment, il était nécessaire de créer un système de gestion d'albums photo, qui devait afficher les images en fonction des albums, j'ai donc utilisé vue sur le front-end et tp5 sur le back-end pour créer un petit système.

Le frontal utilise le composant v-viewer. J'ai rencontré un problème et je l'ai enregistré ici ; c'est-à-dire que lors de la prévisualisation des images, puisque les images sont chargées dynamiquement, elles seront rafraîchies dynamiquement pendant l'aperçu et le saut. à la première image par défaut. Comme le montre l'image, la solution est d'empêcher les nouvelles mises à jour pendant l'aperçu

Les étapes spécifiques sont les suivantes :

1. Créez d'abord un projet de vue et utilisez vue scaffolding pour le créer (si vous ne comprenez pas, vous pouvez consulter la documentation officielle, non expliquée ici)

2 Introduisez le composant v-viewer dans la page

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'
Copier après la connexion

3. . Méthode d'appel, écrivez le code suivant dans le fichier modèle

    <viewer :images="images" class="images clearfix" @inited="handleInited">
        <template slot-scope="scope">
            <img v-for="(src,i) in scope.images"
                :src="src" :key="src" :class="&#39;image &#39; + newClass[i] " @click="handleShow(i)">
        </template>
    </viewer>
Copier après la connexion

Passez dans le tableau d'images, chaque élément est l'URL du chemin de l'image

4. Tant que l'interface back-end obtient. les données, attribuez le tableau d'URL d'image aux images. Si vous obtenez l'image en une seule fois, il n'y a pas de problème. S'il y a un grand nombre d'images, le backend obtient généralement les images par pagination. À ce stade, il est nécessaire d'attendre que toutes les images soient chargées et que l'aperçu ne passe pas à la première image. , il faut regarder les composants. Comment gérer cela en interne ? Après avoir regardé le code, j'ai constaté qu'il suffit de commenter la mise à jour dynamique des modifications dans les images surveillées

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },
Copier après la connexion

 ; puis appelez la méthode de mise à jour lorsque vous cliquez sur l'image. Reportez-vous au code suivant

 handleShow(index) {
    this.$viewer.update()
    this.$viewer.view(index) // 预览当前图片
}
Copier après la connexion

Résumé : Lorsque vous rencontrez des problèmes spécifiques, une analyse spécifique est requise, et parfois le code source doit être modifié pour résoudre le problème (Si vous avez des questions, veuillez consulter et discuter, veuillez le noter lors de votre candidature. ID WeChat : 13163923579)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal