Verwenden Sie V-Viewer in Kombination mit Vue, um eine Vorschau des Albums anzuzeigen

In letzter Zeit besteht die Notwendigkeit, ein Fotoalbum-Verwaltungssystem aufzubauen, das Bilder nach Alben anzeigen muss. Deshalb habe ich Vue im Frontend und TP5 im Backend verwendet, um ein kleines System zu erstellen.

Das Frontend verwendet die V-Viewer-Komponente. Da das Bild in der Vorschau angezeigt wird, wird es standardmäßig dynamisch aktualisiert und springt zum ersten Bild Die einzige Möglichkeit besteht darin, erneute Aktualisierungen während der Vorschau zu verhindern. Die spezifischen Schritte sind wie folgt:

1. Erstellen Sie zunächst ein Vue-Projekt und verwenden Sie das Vue-Gerüst (wenn Sie es nicht verstehen, können Sie die offizielle Dokumentation überprüfen (hier erklärt)

2. Stellen Sie die V-Viewer-Komponente vor

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'

3. Schreiben Sie in der aufrufenden Methode den folgenden Code in die Vorlagendatei

    <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>

images und übergeben Sie ihn an das Array URL des Bildes

4. Solange die Back-End-Schnittstelle die Daten erhält, weisen Sie den Bildern einfach das Bild-URL-Array zu. Es ist kein Problem, wenn Sie das Bild alle auf einmal erhalten. Wenn eine große Anzahl von Bildern vorhanden ist, ruft das Backend die Bilder normalerweise durch Blättern ab. Zu diesem Zeitpunkt muss gewartet werden, bis alle Bilder geladen sind und die Vorschau nicht zum ersten Bild springt , es ist notwendig, die Komponenten zu betrachten. Nachdem ich mir den Code angesehen habe, muss ich nur die dynamische Aktualisierung der überwachten Bilder auskommentieren wenn auf das Bild geklickt wird. Beziehen Sie sich auf den folgenden Code

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },

Zusammenfassung: Wenn Sie auf bestimmte Probleme stoßen, ist eine spezifische Analyse erforderlich, und manchmal muss der Quellcode geändert werden, um das Problem zu lösen (Wenn Sie Fragen haben, konsultieren Sie diese bitte und machen Sie sich eine Notiz bei der Bewerbung. WeChat-ID: 13163923579)

Das obige ist der detaillierte Inhalt vonVerwenden Sie V-Viewer in Kombination mit Vue, um eine Vorschau des Albums anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!