v-viewer
v3.0.15-bTypeScript
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
0/weekUpdated 1 weeks agoMITUnpacked: 46.0 KB
Published by mirari
npm install v-viewerv-viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
v-viewer for vue2
Live demo
Quick Example
- directive
- component
- api
- thumbnail & source
- viewer callback
- custom toolbar
- filter images
- change images
中文文档
Installation
Install from NPM
``bash`
npm install v-viewer viewerjs
Usage
To use v-viewer, simply import it and the css file, and call app.use() to install.
The component, directive and api will be installed together in the global.
Two different API styles are both supported: Options API and Composition API.
`ts`
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`
$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.
`vue`
#### Directive 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.
`vue`
##### 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.
`vue`
$3
You can simply import the component and register it locally too.
`vue`
class="viewer"
ref="viewer"
>
{{scope.options}}
#### Component props
##### images
- Type: Array
##### trigger
- Type: Object
You can replace images with trigger, to accept any type of prop.trigger
when the changes, the component will re-render the viewer.
`vue`
##### rebuild
- Type: Boolean
- Default:
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.
`vue`
:options="options"
:images="images"
rebuild
class="viewer"
@inited="inited"
>
{{scope.options}}
#### Component events
##### inited
- viewer: Viewer
Listen for the inited event to get the viewer instance, or use this.refs.xxx.$viewer.
$3
> Only available in modal mode.
You can call the function: this.$viewerApi({options: {}, images: []}) to show gallery without rendering the img elements yourself.
The function returns the current viewer instance.
`vue`
Options & Methods of Viewer
Refer to viewer.js.
Plugin options
$3
- Type: String
- Default:
If you need to avoid name conflict, you can import it like this:
`ts
import { createApp } from 'vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import App from './App.vue'
export const app = createApp(App)
app.use(VueViewer, {
name: 'vuer',
debug: true,
})
app.mount('#app')
`
`vue`
$3
- Type: Object
- Default:
If you need to set the viewer default options, you can import it like this:
`ts
import { createApp } from 'vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import App from './App.vue'
export const app = createApp(App)
app.use(VueViewer, {
defaultOptions: {
zIndex: 9999
}
})
app.mount('#app')
`
And you can reset the default options at any other time:
`javascript
import VueViewer from 'v-viewer'
VueViewer.setDefaults({
zIndexInline: 2021,
})
``