https://github.com/mirari/vue2-viewer
legacy v-viewer version for vue2
https://github.com/mirari/vue2-viewer
Last synced: 3 months ago
JSON representation
legacy v-viewer version for vue2
- Host: GitHub
- URL: https://github.com/mirari/vue2-viewer
- Owner: mirari
- License: mit
- Created: 2024-01-03T09:17:47.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-06T04:51:55.000Z (over 1 year ago)
- Last Synced: 2025-01-16T17:27:57.145Z (5 months ago)
- Language: Vue
- Size: 21.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# v-viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on [viewer.js](https://github.com/fengyuanchen/viewerjs)
[](https://www.npmjs.com/package/v-viewer)
[](https://www.npmjs.com/package/v-viewer)
[](https://www.npmjs.com/package/v-viewer)
[](https://www.npmjs.com/package/v-viewer)
[](https://www.npmjs.com/package/v-viewer)
[](https://mit-license.org/)
## [v-viewer for vue3](https://github.com/mirari/v-viewer/tree/v3)
## [Live demo](https://mirari.github.io/v-viewer/)
## Examples
- [directive](https://codepen.io/mirari/pen/PePrVq)
- [component](https://codepen.io/mirari/pen/PowNyEY)
- [api](https://codepen.io/mirari/pen/NWpwVdd)
- [thumbnail & source](https://codepen.io/mirari/pen/LYENgMM)
- [viewer callback](https://codepen.io/mirari/pen/ZwpGBO)
- [custom toolbar](https://codepen.io/mirari/pen/GRMBrBv)
- [filter images](https://codepen.io/mirari/pen/vvPoQb)
- [change images](https://codepen.io/mirari/pen/ZdMbOK)
## [中文文档](https://mirari.cc/posts/v-viewer)
## Migration from 0.x
- The only change you have to make is to manually import the `.css` file:
```
import 'viewerjs/dist/viewer.css'
```
## Migration from 1.6.x
- If you were using the `npm` installer before, manually install `viewerjs`:
```bash
npm install v-viewer@legacy viewerjs
```
## Installation
Install from NPM
```bash
npm install v-viewer@legacy viewerjs
```
## Usage
To use `v-viewer`, simply import it and the `css` file, and call `Vue.use()` to install.
```vue
![]()
![]()
Click to show
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
export default {
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
},
methods: {
show() {
this.$viewerApi({
images: this.images,
})
},
},
}
```
### Support UMD
#### Browser
```vue
Vue.use(VueViewer.default)
```
#### CommonJS
```javascript
var VueViewer = require('VueViewer')
```
#### AMD
```javascript
require(['VueViewer'], function (VueViewer) {});
```
### Usage of directive
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
![]()
Show
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
export default {
directives: {
viewer: viewer({
debug: true,
}),
},
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
},
methods: {
show () {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
}
}
}
```
#### 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
![]()
```
### Usage of component
You can simply import the component and register it locally too.
Use [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to customize the presentation of your images.
```vue
![]()
{{scope.options}}
Show
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
export default {
components: {
Viewer
},
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
},
methods: {
inited (viewer) {
this.$viewer = viewer
},
show () {
this.$viewer.show()
}
}
}
```
#### Component props
##### images
- Type: `Array`
##### trigger
- Type: `Object`
You can replace `images` with `trigger`, to accept any type of prop.
when the `trigger` changes, the component will re-render the viewer.
```vue
```
##### rebuild
- Type: `Boolean`
- Default: `false`
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
![]()
{{scope.options}}
```
#### Component events
##### inited
- viewer: `Viewer`
Listen for the `inited` event to get the `viewer` instance, or use `this.refs.xxx.$viewer`.
### Usage of api
> 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
URL Array
Img-Object Array
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from "v-viewer"
export default {
data() {
sourceImageURLs: [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2',
],
sourceImageObjects: [
{
'src':'https://picsum.photos/200/200?random=3',
'data-source':'https://picsum.photos/800/800?random=3'
},
{
'src':'https://picsum.photos/200/200?random=4',
'data-source':'https://picsum.photos/800/800?random=4'
}
]
},
methods: {
previewURL () {
// If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
const $viewer = this.$viewerApi({
images: this.sourceImageURLs
})
},
previewImgObject () {
// Or you can just import the api method and call it.
const $viewer = viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 1
},
images: this.sourceImageObjects
})
}
}
}
```
## Options & Methods of Viewer
Refer to [viewer.js](https://github.com/fengyuanchen/viewerjs).
## Plugin options
### name
- Type: `String`
- Default: `viewer`
If you need to avoid name conflict, you can import it like this:
```vue
![]()
Show
![]()
import 'viewerjs/dist/viewer.css'
import Vuer from 'v-viewer'
import Vue from 'vue'
Vue.use(Vuer, {name: 'vuer'})
export default {
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
},
methods: {
show () {
// viewerjs instance name
const vuer = this.$el.querySelector('.images').$vuer
vuer.show()
// api name
this.$vuerApi({
images: this.images
})
}
}
}
```
### defaultOptions
- Type: `Object`
- Default: `undefined`
If you need to set the viewer default options, you can import it like this:
```javascript
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer, {
defaultOptions: {
zIndex: 9999
}
})
```
And you can reset the default options at any other time:
```javascript
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
VueViewer.setDefaults({
zIndexInline: 2017
})
```