So implementieren Sie die Bildvorschaufunktion in Vue

Im heutigen Webdesign ist das Bildkarussell ein sehr häufiger Effekt. Wenn wir das Vue-Framework zum Entwickeln von Webseiten verwenden, können wir diese Funktion über Vue-Plug-Ins implementieren. In diesem Artikel werden spezifische Codebeispiele bereitgestellt, um die Implementierung der Bildvorschaufunktion in Vue vorzustellen.

1. Einführung in Plug-Ins

Wir können das Vue-Plug-In „vue-awesome-swiper“ verwenden, um die Bildkarussellfunktion zu implementieren. Vue-awesome-swiper ist eine Karussellkomponente, die Endlosschleifenkarussells, dynamisches Hinzufügen und Löschen von Karussellelementen, Reaktionsfähigkeit und Seitenumblätteranimationen unterstützt.

Verwenden Sie npm, um vue-awesome-swiper zu installieren:

npm install vue-awesome-swiper --save

Referenz-Swiper und seine Stile in main.js:

import Vue from 'vue'
import App from './App.vue'
import Swiper from 'vue-awesome-swiper'
// import Swiper styles
import 'swiper/dist/css/swiper.css'
Vue.use(Swiper)

new Vue({
  el: '#app',
  render: h => h(App),
})

Zweitens verwenden Sie die Vue-awesome-swiper-Komponente

Der folgende Code zeigt, wie Sie Vue-awesome verwenden -Swiper-Komponente:

<template>
  <div class="container">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img  :src="item.url" @click="previewImage(item.url)" / alt="So implementieren Sie die Bildvorschaufunktion in Vue" >
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/1.png',
        },
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/2.png',
        },
        {
          url:
            'https://raw.githubusercontent.com/surmon-china/vue-awesome-swiper/HEAD/swiper-demo/static/images/3.png',
        },
      ],
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
      },
    }
  },
  methods: {
    previewImage(url) {
      this.$modal.show('preview', {
        src: url, // 图片链接，必填
      })
    },
  },
}
</script>

3. Bildvorschaufunktion hinzufügen

Wenn der Benutzer im obigen Beispiel auf das Bild klickt, rufen wir eine Methode zur Vorschau des Bildes auf. Um diese Funktion zu erreichen, verwenden wir hier ein Vue-Plug-in namens vue-js-modal.

Wir können npm verwenden, um das vue-js-modal-Plug-in zu installieren:

npm install --save vue-js-modal

Fügen Sie das Modul in main.js ein und deklarieren Sie:

import Vue from 'vue'
import App from './App.vue'
import { Modal } from 'vue-js-modal'
Vue.use(Modal, { componentName: 'modal' })

new Vue({
  el: '#app',
  render: h => h(App),
})

Fügen Sie die Importanweisung in der Komponente ein und verwenden Sie dann das vue-js- Modale Komponente zur Vorschau:

<template>
  <modal name="preview">
    <img  :src="src"    style="max-width:90%" / alt="So implementieren Sie die Bildvorschaufunktion in Vue" >
  </modal>
</template>

Wenn wir auf das Bild klicken, rufen wir this.$modal.show('preview', { src: url }) auf und können dann das Bild anzeigen.

Zu diesem Zeitpunkt haben wir die Bildvorschaufunktion erfolgreich hinzugefügt. Im Zuge der Kombination der Plug-Ins Vue-awesome-swiper und vue-js-modal haben wir die Bildkarussell- und Bildvorschaufunktionen implementiert.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Bildvorschaufunktion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!