@luohc92/vue-image-viewer
v0.1.5
Published
a image viewer for vue
Downloads
7
Readme
vue-image-viewer
A image viewer for vue2.x
Install
npm i @luohc92/vue-image-viewer
Usage
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
[]