Vue.js ile küçük resmin üzerine tıklayınca büyütmek

2 hafta önce , Okuma süresi 1 dakika.

Bazen projelerimizde küçük resimlerin üzerine gelindiğinde veya tıklanıldığında büyütülmesini isteyebiliriz. İşte bu Vue.js sınıfı tam bu işlemi yapmak için ideal.
Vue.js ile küçük resmin üzerine tıklayınca büyütmek

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.

vue-büyütülebilir-görüntü

Ö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)

vue-büyütülebilir-imageZ

Gereksinimler

Kurulum

npm

$ npm install @diracleo/vue-enlargeable-image

external 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 size

Styling 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

#javascript