Image Viewer Component For Vue – v-viewer

Description:

An image viewer component for Vue 3 & 2, with support for rotation, scale, zoom and much more.

Basic Usage:

1. Import and register the v-viewer.

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')
// Vue 2
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)

2. Use the v-viewer as a directive.

<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
// Vue 3
import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        images: [
          "1.jpg",
          "2.jpg",
          "3.jpg"
        ]
      };
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
})
// Vue 2
export default {
  data() {
    return {
      images: [
        "1.jpg",
        "2.jpg",
        "3.jpg"
      ]
    };
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images,
      })
    },
  },
}

3. Use the v-viewer as a component.

<viewer :images="images">
  <img v-for="src in images" :key="src" :src="src">
</viewer>

4. Component props.

images: {
  type: Array,
  default: () => [],
},
rebuild: {
  type: Boolean,
  default: false,
},
trigger: {
  type: Object,
  default: null,
},
options: {
  type: Object as PropType<Viewer.Options>,
  default: () => null,
},

Preview:

v-viewer

Changelog:

v1.7.0 (01/11/2022)

  • refactor with vite

v1.6.3 (07/09/2021)

  • Bug Fixes

Download Details:

Author: mirari

Live Demo: http://mirari.cc/v-viewer/

Download Link: https://github.com/mirari/v-viewer/archive/master.zip

Official Website: https://github.com/mirari/v-viewer

Install & Download:

# Vue 2
$ npm i v-viewer

# Vue 3
$ npm i [email protected]

You Might Be Interested In:

Add Comment