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

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:

Touch-friendly Image Previewer For Vue 3

Changelog:

v0.2.4 (05/13/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

Add Comment