https://github.com/nullptru/vue-previewer
👀A vue component for previewing images
https://github.com/nullptru/vue-previewer
image-preview vue
Last synced: 7 months ago
JSON representation
👀A vue component for previewing images
- Host: GitHub
- URL: https://github.com/nullptru/vue-previewer
- Owner: nullptru
- License: mit
- Created: 2019-07-06T16:22:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:19:49.000Z (over 3 years ago)
- Last Synced: 2025-09-07T14:34:06.032Z (8 months ago)
- Topics: image-preview, vue
- Language: Vue
- Homepage:
- Size: 483 KB
- Stars: 8
- Watchers: 0
- Forks: 5
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-previewer
👀 A vue component for previewing images
### Live Demo
[>> Live Demo](https://geasscn.com/static/vue-previewer/index.html)
### Features
+ no other dependencies
+ support zoom-in, zoom-out, rotate, fullscreen operations
+ support image events such as select, close
+ support customer options
+ support key operation
+ support footer slot
### Install
```
// with yarn
yarn add vue-image-previewer
// with npm
npm install vue-image-previewer
```
### Usage
```
import VuePreviewer from 'vue-image-previewer'
// defalut install
Vue.use(VuePreviewer);
// install with global options
Vue.use(VuePreviewer, {
defaultWidth: '100px',
defaultHeight: '75px',
thumbnailStyle: {
backgroundSize: 'cover'
},
keyMap: {
zoomin: '+',
zoomout: '-',
rotate: 'r',
prev: 'ArrowLeft',
next: 'ArrowRight'
}
})
```
### Example
```
new Vue({
el: '#app',
components: { VuePreviewer },
data() {
return {
imgs: [
'http://pic.lvmama.com/uploads/pc/place2/2016-09-14/9aab9bb7-2593-4ca6-8c5a-31355443aebc.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJQQM7xWSl3uRGecETNjaLl8_2wmAvlGpwyzX_Xs3RyZoTsM_j',
"http://crawl.nosdn.127.net/d426f0175b974f7cce092a8f16d0ee09.jpg",
"http://seopic.699pic.com/photo/50093/5337.jpg_wh1200.jpg"
]
}
},
template: ''
})
```
### Props
|Property|Type|Description| Default |
|---|---|---|---|
|images|Array[String/ImageOptions]| Images for previewing|**required** |
|options| PreviewerOptions | Extra options for configing component | {} |
|mode| "image", "link" | show image as link or image | "image"|
|showFooter| Boolean | Footer slot | true |
#### ImageOptions
```
{
src: 'xxx.jpg', // origin image source
thumbnailSrc: 'xxxThumbnail.jpg', // thumbnail source
width: '100px', // thumbnail width
height: '75px', // thumbnail height
name: 'Image Test' // Image name which shows in footer
}
```
#### PreviewerOptions
```
// default options
{
defaultWidth: '100px', // thumbnail width, '100px' or '20%'
defaultHeight: '75px', // thumbnailStyle height, '100px' or '20%'
thumbnailStyle: { backgroundSize: 'cover' },
keyMap: {
zoomin: '+',
zoomout: '-',
rotate: 'r',
prev: 'ArrowLeft',
next: 'ArrowRight'
}
}
```
### Events
|Event| Description|Parameters|
|---|---|---|
|close| Trigger when component is closed|
|select| Trigger when select a image from list| Selected image(ImageOptions)|
### slot
| Name | Parameters |
|---|---|
| footer | Current ImageOptions|
#### 🤗 Please feel free to contribute a PR or make an issue
### License
VuePreviewer is [MIT Licensed](https://github.com/nullptru/vue-previewer/blob/master/LICENSE).
Copyright (c) 2019 Geass