Bagaimana untuk melaksanakan fungsi pratonton imej dalam Vue

Dalam reka bentuk web hari ini, karusel imej adalah kesan yang sangat biasa. Apabila menggunakan rangka kerja Vue untuk membangunkan halaman web, kami boleh melaksanakan fungsi ini melalui pemalam Vue. Artikel ini akan memberikan contoh kod khusus untuk memperkenalkan cara melaksanakan fungsi pratonton imej dalam Vue.

1. Memperkenalkan pemalam

Kita boleh menggunakan pemalam Vue vue-awesome-swiper untuk melaksanakan fungsi karusel imej. Vue-awesome-swiper ialah komponen karusel yang menyokong karusel gelung tak terhingga, penambahan dinamik dan pemadaman item karusel, responsif dan animasi mengubah halaman serta fungsi kaya yang lain.

Gunakan npm untuk memasang vue-awesome-swiper:

npm install vue-awesome-swiper --save

Reference swiper dan gayanya dalam 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),
})

Kedua, gunakan komponen Vue-awesome-swiper

Kod berikut menunjukkan cara menggunakan Vue-awesome -komponen 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="Bagaimana untuk melaksanakan fungsi pratonton imej dalam 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. Tambah fungsi pratonton imej

Dalam contoh di atas, apabila pengguna mengklik pada imej, kami memanggil kaedah untuk pratonton imej. Kami menggunakan pemalam Vue yang dipanggil vue-js-modal di sini untuk mencapai fungsi ini.

Kita boleh menggunakan npm untuk memasang pemalam vue-js-modal:

npm install --save vue-js-modal

Perkenalkan modul dalam main.js dan isytiharkan:

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

Perkenalkan pernyataan import dalam komponen, dan kemudian gunakan vue-js- komponen modal untuk pratonton:

<template>
  <modal name="preview">
    <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"  :    style="max-width:90%" / alt="Bagaimana untuk melaksanakan fungsi pratonton imej dalam Vue" >
  </modal>
</template>

Apabila kita mengklik pada gambar, kita memanggil this.$modal.show('preview', { src: url }), dan kemudian kita boleh memaparkan gambar itu.

Pada ketika ini, kami telah berjaya menambah fungsi pratonton imej Dalam proses menggabungkan pemalam Vue-awesome-swiper dan vue-js-modal, kami telah melaksanakan fungsi karusel imej dan pratonton imej.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pratonton imej dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!