npm package: @luohc92/vue3-image-viewer
Description: a image viewer for vue3.0 一款vue3.0的图片查看器
Author: luohc92
Latest version: 1.0.5

# vue3-image-viewer

A image viewer for vue3.x

一款 vue3.0 的图片查看器

vue2.x 版 [vue-image-viewer](https://github.com/luohc92/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 关闭                                                                      |