Petua dan amalan terbaik untuk melaksanakan fungsi pratonton imej dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi satu halaman (SPA). Pratonton imej ialah ciri biasa dalam aplikasi web, dan terdapat banyak cara untuk melaksanakan pratonton imej dalam Vue. Artikel ini akan memperkenalkan secara terperinci teknik dan amalan terbaik untuk melaksanakan fungsi pratonton imej dalam Vue.

1. Gunakan pemalam Vue

Pemalam Vue menyediakan cara mudah untuk pratonton imej. Pemalam Vue boleh didaftarkan secara global supaya ia boleh digunakan sepanjang aplikasi. Berikut ialah dua pemalam Vue yang biasa digunakan, Peti Cahaya dan galeri vue.

1. Lightbox

Lightbox ialah perpustakaan JavaScript ringan yang sangat popular yang boleh digunakan untuk memaparkan imej dan penerangannya. Peti cahaya berfungsi seperti lapisan pop timbul, menunjukkan imej sambil memudar bahagian lain.

Dalam Vue, anda boleh menggunakan pemalam Galeri Peti Cahaya Vue untuk mencapai kesan Peti Cahaya. Penggunaannya adalah seperti berikut:

Pasang pemalam:

npm pasang vue-lightbox-gallery --save

Daftar pemalam secara global:

import VueLightboxGallery dari 'vue-lightbox-gallery'
gunakan(VueLightboxGallery)

Dalam komponen Pemalam yang digunakan dalam:

:groups="lightboxGroups"
group-text="Picture%num% of %total%"
hide-overlay -on-close
:show-close-button ="false"
:show-image-number="false"
/>

Di mana, lightboxGroups ialah tatasusunan yang mengandungi imej untuk dipratonton. Anda boleh menambah URL dan penerangan kumpulan gambar. teks kumpulan ialah perihalan kumpulan gambar yang dipaparkan, %num% akan digantikan secara automatik dengan nombor siri gambar, dan %total% akan digantikan secara automatik dengan jumlah gambar. hide-overlay-on-close digunakan untuk menyembunyikan topeng latar belakang selepas menutup Peti Cahaya. butang show-close-button dan show-image-number digunakan untuk mengawal sama ada untuk memaparkan atau menyembunyikan butang tutup dan bilangan imej.

2.vue-gallery

vue-gallery ialah komponen galeri berdasarkan Vue.js. Ia menyediakan UI yang fleksibel dan mudah digunakan untuk menjadikan pustaka foto anda lebih cantik. Ia mempunyai banyak pilihan penyesuaian untuk disesuaikan dengan senario aplikasi yang berbeza.

Pasang pemalam:

npm pasang vue-gallery --save

Gunakan pemalam dalam komponen:

Antaranya, imej ialah fail yang perlu dipratonton Susunan maklumat imej Setiap imej mesti mengandungi URL, tajuk, perihalan, lebar dan tinggi.

2. Gunakan JavaScript tulen

Walaupun menggunakan pemalam Vue adalah cara yang lebih cekap, fungsi pratonton imej juga boleh dicapai menggunakan JavaScript tulen. Berikut ialah beberapa petua dan amalan terbaik untuk menggunakan JavaScript tulen.

1. Gunakan CSS untuk melaksanakan pratonton imej

Anda boleh menggunakan CSS untuk melaksanakan fungsi pratonton imej yang ringkas. Contohnya, gunakan :hover pseudo-class untuk menskalakan imej kepada saiz tertentu.

/CSS/
.img-box{
lebar:200px;
tinggi:200px;
limpahan:tersembunyi;
}
.img-box img{
peralihan:semua .3s;-
box:hover img{
transform:scale(1.1);
}

Dalam contoh ini, .img- The kelas kotak menetapkan lebar dan ketinggian bekas dan menyembunyikan sebarang limpahan menggunakan limpahan: tersembunyi. Apabila tetikus dilegar di atas imej, elemen img akan dibesarkan melalui atribut transform:scale().

Kaedah pelaksanaan ini sangat mudah alih dan sangat mudah digunakan.

Menggunakan perpustakaan JavaScript

Selain Vue, perpustakaan JavaScript juga boleh digunakan untuk melaksanakan pratonton imej. Di bawah ialah dua perpustakaan JavaScript yang mendayakan pelbagai kesan pratonton imej.

PhotoSwipe

PhotoSwipe ialah perpustakaan JavaScript yang berkuasa dan fleksibel untuk mencipta galeri imej dan video responsif. Ia menyokong fungsi leret, zum dan putar, dan juga tersedia pada desktop dan peranti mudah alih.

Pasang PhotoSwipe:

npm pasang photoswipe --save

Import CSS dan kod yang diperlukan:

import 'photoswipe/dist/photoswipe.css'

import 'photoswipe/dist/default-skin
import PhotoSwipe dari 'photoswipe'
import PhotoSwipeUI_Default daripada 'photoswipe/dist/photoswipe-ui-default'

// Initialize PhotoSwipe

const photoswipe = PhotoSwipe baharu(
pswpElementSwipe,
UIP_FotoSwipe,

)

Antaranya, pswpElement ialah elemen DOM yang mengandungi UI グaleri foto, item ialah tatasusunan yang mengandungi maklumat foto untuk dipratonton, dan pilihan ialah pilihan dan tetapan.

Viewer.js

• Viewer.js ialah perpustakaan JavaScript yang berkuasa untuk mencipta penonton imej. Ia menyokong pelbagai jenis fail dan membolehkan fungsi seperti mengezum masuk, mengezum keluar, berputar dan membalikkan.

Install Viewer.js:

npm install viewerjs --save

Penggunaan:

// Import CSS

import 'viewerjs/dist/viewer.min.css'

// Import JS '
importjs'

// Initialize Viewer.js

const viewer = new Viewer(img, options)

di mana img ialah elemen DOM yang mengandungi imej, dan pilihan ialah pilihan dan tetapan.

Ringkasan

Melaksanakan fungsi pratonton imej dalam Vue bukanlah tugas yang sukar. Dalam Vue, perpustakaan dan pemalam JavaScript pihak ketiga boleh digunakan untuk mencapai pelbagai kesan. Pada masa yang sama, ia juga boleh dilaksanakan menggunakan teknologi JavaScript tulen. Apabila memilih kaedah yang sesuai untuk aplikasi anda, anda perlu mempertimbangkan isu seperti kecekapan, mudah alih dan kebolehgunaan.

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