@chashao__/vue-img-viewer

vue-img-viewer

Table of contents

• Getting started
• Props
• Methods
• Events

Getting started

Installation

npm install @chashao__/vue-img-viewer --save

Usage

local component

<template>
  <img-viewer :src="imgSrc"></img-viewer>
</template>

<script>
import ImgViewer from '@chashao__/vue-img-viewer'
export default {
  components: {
    ImgViewer
  },
  data () {
    return {
      imgSrc: ''
    }
  }
}
</script>

global component

import Vue from vue
import ImgViewer from '@chashao__/vue-img-viewer'
Vue.use(ImgViewer)

Props

src

• type: Boolean
• required: true

Define where to get the original image URL for viewing

autoZoom

• Type: Boolean
• Required: true

Whether the size is adaptive during initialization

toolbar

• Type: Boolean
• Default: true

Specify the visibility of the toolbar

movable

• Type: Boolean
• Default: true

Enable to move the image.

rotatable

• Type: Boolean
• Default: true

Enable to rotate the image.

flippable

• Type: Boolean
• Default: true

Enable to flip the image.

zoomable

• Type: Boolean
• Default: true

Enable to zoom the image.

zoomOnWheel

• Type: Boolean
• Default: true

Enable to zoom the image by wheeling the mouse.

zoomRatio

• Type: Number
• Default: 0.1

Define the ratio when zooming the image by wheeling the mouse.

Methods

reset()

reset the viewer.

Events

on-zoom

on-rotate