v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js


Live demo

Examples

- directive
- component
- thumbnail & source
- viewer callback
- hide img tags
- filter images
- change images
- click buttons to show different images

中文文档

Migration from 0.x

- The only change you have to make is to manually import the .css file:

``
import 'viewerjs/dist/viewer.css'
`

Installation

Install from GitHub via NPM

`bash
npm install v-viewer
`

Usage

To use v-viewer, simply import it and the css file, and call Vue.use() to install.

`html


`

$3

#### Browser

`html




...

`

#### CommonJS

`javascript
var VueViewer = require("VueViewer");
`

#### AMD

`javascript
require(["VueViewer"], function (VueViewer) {});
`

$3

Just add the directive v-viewer to any element, then all img elements in it will be handled by viewer.

You can set the options like this: v-viewer="{inline: true}"

Get the element by selector and then use el.$viewer to get the viewer instance if you need.

`html


`

#### Direcitve modifiers

##### static

The viewer instance will be created only once after the directive binded.

If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.

`

`

##### rebuild

The viewer instance will be updated by update method when the source images changed (added, removed or sorted) by default.

If you encounter any display problems, try rebuilding instead of updating.

`

`

$3

You can simply import the component and register it locally too.

Use scoped slot to customize the presentation of your images.

`html


`

#### Component props

##### images

- Type: Array

##### trigger

- Type: Array

You can replace images with trigger, to accept any type of prop.
when the trigger changes, the component will re-render the viewer.

`html