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 关闭 |