Versatile Image Viewer Component For Vue 3

Install & Download:

# Yarn
$ yarn add v3-img-preview
# NPM
$ npm i v3-img-preview

Description:

A feature-rich image lightbox viewer that supports zoom, pan, rotate, and much more.

Keyboard Interactions:

• A ← Previous
• D → Next
• S ↓ Zoom Out
• W ↑ Zoom In
• Q Rotate Left
• E Rotate Right
• Space Reset

How to use it:

1. Import and register the component.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import v3ImgPreview from 'v3-img-preview'
const app = createApp(App)
app.mount('#app')
app.use(v3ImgPreview, {
  // configs here
})

2. Use it in your component.

<template>
  <div class="box">
    <button @click="handleClick">Example 1</button>
    <button @click="handleImgPreview">Example 2</button>
  </div>
</template>

import { defineComponent } from 'vue'
import { v3ImgPreviewFn } from 'v3-img-preview'
export default defineComponent({
  name: 'ServeDev',
  components: {},
  setup() {
    const instance = getCurrentInstance()
    const handleClick = () => {
      v3ImgPreviewFn(
        'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
      )
    }
    // or
    const handleImgPreview = () => {
      instance.proxy.$v3ImgPreviewFn(
        'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
      )
    }
    return { handleClick, handleImgPreview }
  }
})

3. Available component props.

showToolbar: {
  type: Boolean,
  default: true
},
showArrowBtn: {
  type: Boolean,
  default: true
},
keyboard: {
  type: Boolean,
  default: true
},
url: {
  type: String,
  default: undefined
},
escClose: {
  type: Boolean,
  default: true
},
images: {
  type: Array as PropType<string[]>,
  default: () => []
},
showCloseBtn: {
  type: Boolean,
  default: true
},
index: {
  type: Number,
  default: 0
},
on_unmount_v3_ima_preview_app: {
  type: Function
}

Preview: