@luohc92/vue3-image-viewer

vue3-image-viewer

A image viewer for vue3.x

一款 vue3.0 的图片查看器

vue2.x 版 vue-image-viewer

Install 安装

npm install @luohc92/vue3-image-viewer

Usage 使用方法

import ImageViewer from "@luohc92/vue3-image-viewer";
import '@luohc92/vue3-image-viewer/dist/style.css';

  ImageViewer({
    images: images,
    curIndex: 0,
    zIndex: 2000,
    zoomRate: 1.2,
    minScale: 0.2,
    maxScale: 5,
    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
zoomRate	Number	false	zoom rate of the image 图片缩放倍率	1.2 ( > 1)
minScale	Number	false	the min scale of the image 图片的最小缩放率	0.2 ( > 0)
maxScale	Number	false	the max scale of the image 图片的最大缩放率	5 ( > 1)
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)
closeOnClickMask	Boolean	false	whether the image viewer can be closed by clicking the mask 点击遮罩关闭图片查看器	true
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 关闭