A touch-friendly and feature-rich image viewer component for Vue.3.
Features:
- Supports both Desktop and Mobile.
- Responsive image.
- Image zoom, flip, and rotate.
- Smooth transitions.
How to use it:
1. Import and register the component.
import vue3PhotoPreview from 'vue3-photo-preview'; import 'vue3-photo-preview/dist/index.css';
app.use(vue3PhotoPreview);
2. Add the component to the template.
<template>
<photo-provider>
<photo-consumer v-for="src in imgList" :intro="src" :key="src" :src="src">
<img :src="src" class="view-box">
</photo-consumer>
</photo-provider>
</template>
3. Available props for the PhotoProvider.
photoClosable: {
type: Boolean,
default: false,
},
maskClosable: {
type: Boolean,
default: true,
},
shouldTransition: {
type: Boolean,
default: false,
},
defaultBackdropOpacity: {
type: Number,
default: 1,
}
4. Available props for the PhotoConsumer.
/**
* Image Source
*/
src: {
type: String,
required: true,
},
/**
* Image Description
*/
intro: {
type: String,
default: null
},
/**
* Download Name
*/
downloadName: {
type: String,
default: null
}
Preview:
Changelog:
v0.2.5 (07/06/2022)
- Bugfix
Download Details:
Author: NameWjp
Live Demo: https://namewjp.github.io/vue3-photo-preview/
Download Link: https://github.com/NameWjp/vue3-photo-preview/archive/refs/heads/master.zip
Official Website: https://github.com/NameWjp/vue3-photo-preview
Install & Download:
# NPM
$ npm i vue3-photo-preview