Rumah > hujung hadapan web > View.js > teks badan

Bagaimana untuk melaksanakan fungsi pratonton imej dalam Vue

WBOY
Lepaskan: 2023-11-07 10:27:31
asal
1788 orang telah melayarinya

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
Salin selepas log masuk

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),
})
Salin selepas log masuk

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="item.url" @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>
Salin selepas log masuk

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
Salin selepas log masuk

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),
})
Salin selepas log masuk

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

<template>
  <modal name="preview">
    <img  :src="src"    style="max-width:90%" / alt="Bagaimana untuk melaksanakan fungsi pratonton imej dalam Vue" >
  </modal>
</template>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan