0.1.5 • Published 2 years ago
@luohc92/vue-image-viewer v0.1.5
vue-image-viewer
A image viewer for vue2.x
Install
npm i @luohc92/vue-image-viewerUsage
import ImageViewer from "@luohc92/vue-image-viewer";
Vue.use(ImagePreview) this.$imageViewer({
images: images,
curIndex: 0,
zIndex: 2000,
showDownload: true,
showThumbnail: true,
handlePosition: "bottom",
maskBgColor: "rgba(0,0,0,0.7)",
onClose: () => {
console.log("close");
},
});Props
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
| images | Array | true | images source 图片源 | [] |
| curIndex | Number | false | default display image 默认显示图片 | 0 |
| zIndex | Number | false | set image viewer z-index 设置图片查看器的 z-index | 2000 |
| showDownload | Boolean | false | show download button 显示下载按钮 | false |
| showThumbnail | Boolean | false | show images thumbnail 显示图片缩略图 | false |
| handlePosition | String top,bottom | false | set handle position 设置操作柄显示位置 | bottom |
| maskBgColor | String | false | set mask background color 设置遮罩背景颜色 | rgba(0,0,0,0.7) |
| onClose | Function | false | close function callback 关闭方法回调 | null |
| onDownload | Function | false | download image function callback 关闭方法回调 | null |
Keyboard Shortcuts
| Keyboard | Action |
|---|---|
| arrow-left | prev 上一张 |
| arrow-right | next 下一张 |
| arrow-up | zoomIn 放大 |
| arrow-down | zoomOut 缩小 |
| alt | clockwise rotation 顺时针旋转 |
| ctrl | mirror 镜像翻转 |
| space | toggle image size mode contain,original 图片显示大小模式自适应大小,原始大小 |
| esc | close 关闭 |
Demo
[
]