Comment implémenter la fonction de prévisualisation d'image dans Vue

Dans la conception Web d’aujourd’hui, le carrousel d’images est un effet très courant. Lorsque nous utilisons le framework Vue pour développer des pages Web, nous pouvons implémenter cette fonction via les plug-ins Vue. Cet article fournira des exemples de code spécifiques pour présenter comment implémenter la fonction de prévisualisation d'image dans Vue.

1. Présentation des plug-ins

Nous pouvons utiliser le plug-in Vue vue-awesome-swiper pour implémenter la fonction carrousel d'images. Vue-awesome-swiper est un composant de carrousel qui prend en charge les carrousels à boucles infinies, l'ajout et la suppression dynamiques d'éléments de carrousel, la réactivité et les animations de changement de page.

Utilisez npm pour installer vue-awesome-swiper:

npm install vue-awesome-swiper --save

Swiper de référence et ses styles dans 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),
})

Deuxièmement, utilisez le composant Vue-awesome-swiper

Le code suivant montre comment utiliser Vue-awesome -composant swiper :

<template>
  <div class="container">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img  src="/static/imghw/default1.png"  data-src="item.url"  class="lazy"  : @click="previewImage(item.url)" / alt="Comment implémenter la fonction de prévisualisation d'image dans 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. Ajouter une fonction de prévisualisation de l'image

Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur l'image, nous appelons une méthode pour prévisualiser l'image. Nous utilisons ici un plug-in Vue appelé vue-js-modal pour réaliser cette fonction.

Nous pouvons utiliser npm pour installer le plug-in vue-js-modal :

npm install --save vue-js-modal

Introduisez le module dans main.js et déclarez :

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

Introduisez l'instruction import dans le composant, puis utilisez l'instruction vue-js- composant modal pour prévisualiser :

<template>
  <modal name="preview">
    <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"  :    style="max-width:90%" / alt="Comment implémenter la fonction de prévisualisation d'image dans Vue" >
  </modal>
</template>

Quand on clique sur l'image, on appelle this.$modal.show('preview', { src: url }), et ensuite on peut afficher l'image.

À ce stade, nous avons ajouté avec succès la fonction d'aperçu d'image. Dans le processus de combinaison des plug-ins Vue-awesome-swiper et vue-js-modal, nous avons implémenté les fonctions de carrousel d'images et d'aperçu d'image.

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!