Sınıf : vue-enlargeable-image
Tıklandığında, pürüzsüz bir animasyon kullanarak bir görüntüyü küçük resimden tam sürüme büyüten bir Vue bileşeni.
Özellikleri
Hem bir küçük resim kaynağı hem de tam boyutlu bir kaynak belirtin Küçük resim sürümü hemen yüklenecek Tam sürüm, büyütme üzerine yüklenir ve küçük resim sürümünden sorunsuz bir şekilde dönüştürülür Animasyonun süresini belirtin Herhangi bir bileşeni veya HTML öğesini içine yerleştirin - yalnızca bir img öğesi olmak zorunda değildir (daha fazla bilgi edinmek için okumaya devam edin) Kendi CSS sınıf tanımlarınızla istediğiniz gibi bileşenin stilini belirleyin (daha fazla bilgi edinmek için okumaya devam edin)Gereksinimler
Vue.jsKurulum
npm
$ npm install @diracleo/vue-enlargeable-imageexternal script
<script src="https://unpkg.com/@diracleo/vue-enlargeable-image/dist/vue-enlargeable-image.min.js"></script>Kullanım
main.js
import Vue from 'vue' import App from './App.vue' import EnlargeableImage from '@diracleo/vue-enlargeable-image'; Vue.use(EnlargeableImage) new Vue({ el: 'body', components: { App } })template
<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg" />Varsayılan img yerine bir HTML öğesi yerleştirme:
<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg"> <span>Click me to see the image</span> </enlargeable-image>Varsayılan img yerine başka bir bileşeni yerleştirmek (ve animasyon süresini ayarlamak):
<enlargeable-image src="/path/to/thumbnail.jpg" src_large="/path/to/fullsize.jpg" animation_duration="2000"> <v-lazy-image src="/path/to/thumbnail.jpg" /> </enlargeable-image>Properties
PROPERTY TYPE DEFAULT REQUIRED DESCRIPTION src String N/A yes Relative path or absolute URL to the thumbnail image src_large String N/A yes Relative path or absolute URL to the full size image animation_duration String 700 no How many milliseconds that the enlarging and delarging animation will take (0 for no animation)Events
NAME ARGUMENTS DESCRIPTION enlarging None Fired when image starts to get bigger enlarged None Fired when image has reached full size delarging None Fired when image starts to get smaller delarged None Fired when image is back to original sizeStyling the component
.enlargeable-image .enlargeable-image-slot { display:inline-block; } .enlargeable-image .enlargeable-image-slot > img { max-width:100%; } .enlargeable-image > .enlargeable-image-slot { max-width:100%; max-height:100%; cursor:zoom-in; } .enlargeable-image > .enlargeable-image-slot.active { opacity:0.3; filter:grayscale(100%); } .enlargeable-image .enlargeable-image-full { cursor:zoom-out; background-color:transparent; align-items:center; justify-content:center; background-position: center center; background-repeat:no-repeat; background-size:contain; z-index:2000; display:none; } .enlargeable-image .enlargeable-image-full > img { object-fit:contain; width:100%; height:100%; } .enlargeable-image .enlargeable-image-full.enlarging { display:flex; position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:transparent; cursor:zoom-out; } .enlargeable-image .enlargeable-image-full.delarging { display:flex; position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:transparent; cursor:zoom-in; } .enlargeable-image .enlargeable-image-full.enlarged { display:flex; }GitHub : https://github.com/diracleo/vue-enlargeable-image