Basic Image Viewer For Vue.js 3

Install & Download:

$ npm install vue-imageview

Description:

A basic image viewer component that enlarges/displays your images in a responsive, fullscreen popup window. Currently works with the latest Vue 3.

How to use it:

1. Install and import the image viewer.

import ImagesView from './components/index';
import { ref, onMounted } from 'vue'
const show = ref(false)
const srcArr = ref([])
const imgSrc = ref('');
const getData = (imgBox: HTMLDivElement) => {
  const imgs = imgBox.querySelectorAll('img');
  srcArr.value = Array.from(imgs).map((el) => el.src);
}
onMounted(() => {
  const imgBox: HTMLDivElement = document.querySelector('#imgBox');
  getData(imgBox);
  imgBox.addEventListener('click', (e: any) => {
    if(e.target.nodeName == 'IMG') {
      imgSrc.value = e.target.src;
      show.value = true
    }
  })
});

2. Add your images to the image viewer.

<template>
  <h1>Click To Enlarge</h1>
  <div id="imgBox">
    <img src="1.jpg" alt="">
    <img src="2.webp" alt="">
    <img src="3.jpeg" alt="">
    <!-- more images here -->
  </div>
  <ImagesView v-model:visible="show" :images="srcArr" :src="imgSrc" />
</template>

Preview:

Changelog:

v0.3.0 (06/14/2022)

• Update for Vue 3