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

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'

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>

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()
      // })
    },

 ; 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) // 预览当前图片
}

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!