Touch-friendly Image Previewer For Vue 3 – photo-preview

Install & Download:

# NPM
$ npm i vue3-photo-preview

Description:

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