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
Download Details:
Author: naihe138
Live Demo: http://naice.me/vue-imageview/example/demo3/index.html#/
Download Link: https://github.com/naihe138/vue-imageview/archive/master.zip
Official Website: https://github.com/naihe138/vue-imageview
Install & Download:
$ npm install vue-imageview