Rumah > Artikel > hujung hadapan web > 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.
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:
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.
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);
}
import 'photoswipe/dist/default-skin
import PhotoSwipe dari 'photoswipe'
import PhotoSwipeUI_Default daripada 'photoswipe/dist/photoswipe-ui-default'
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.
Install Viewer.js:
npm install viewerjs --save
Penggunaan:
// Import CSS
import 'viewerjs/dist/viewer.min.css'// Import JS '
importjs'
// Initialize Viewer.js
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!