# vue-imgs-viewer

> vue image preview component

Latest version **1.0.0** (published 2020-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-imgs-viewer
pnpm add vue-imgs-viewer
yarn add vue-imgs-viewer
bun add vue-imgs-viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-12-26 |
| First published | 2020-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 93.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | shenqz |
| Maintainers | shenqingzhu |
| Keywords | vue, vue2, components, image, imgs-viewer, image-viewer |

## Links

- npm: https://www.npmjs.com/package/vue-imgs-viewer
- Repository: https://github.com/xh-shen/vue-imgs-viewer
- Homepage: https://github.com/xh-shen/vue-imgs-viewer#readme
- Issues: https://github.com/xh-shen/vue-imgs-viewer/issues
- npm.io page: https://npm.io/package/vue-imgs-viewer

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-12-26
- 0.0.3-0 (beta) — 2020-12-26
- 0.0.4-6 — 2020-12-26
- 0.0.4-5 — 2020-12-26
- 0.0.4-4 — 2020-12-26
- 0.0.4-3 — 2020-12-26
- 0.0.4-2 — 2020-12-26
- 0.0.4-1 — 2020-12-26
- 0.0.4-0 — 2020-12-26
- 0.0.1 — 2020-12-26

## README

<!--
 * @Author: shen
 * @Date: 2020-12-25 10:52:41
 * @LastEditors: shen
 * @LastEditTime: 2020-12-26 15:36:39
 * @Description:
-->

# vue-imgs-viewer

一个 vue2 图片预览组件，支持切换、旋转、缩放等功能，不依赖其他三方库，可以直接使用。

## 安装

```sh
# Yarn
yarn add vue-imgs-viewer

# Npm
npm install vue-imgs-viewer --save
```

## Attribute

| 参数                  | 说明                                                 | 类型            | 默认值 |
| --------------------- | ---------------------------------------------------- | --------------- | ------ |
| v-model               | 显示隐藏                                             | boolean         | false  |
| img-list              | 图片数据列表['url'] 或[{url: 'url', title: 'title'}] | array           | -      |
| z-index               | css 层级                                             | number          | 2000   |
| close-on-click-mask   | 是否可以通过点击遮罩关闭 ImageViewer                 | boolean         | false  |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 ImageViewer                | boolean         | true   |
| initial-index         | 默认打开的图片索引                                   | number          | 0      |
| on-switch             | 切换回调                                             | function(index) | -      |

## Keyboard Operation

| Keyboard               | 说明                       |
| ---------------------- | -------------------------- |
| SPACE(空格键)          | 切换原图大小或屏幕缩放大小 |
| LEFT_ARROW(左方向键)   | 切换到上一张图片           |
| RIGHT_ARROW (右方向键) | 切换到下一张图片           |
| UP_ARROW(上方向键)     | 放大图片                   |
| DOWN_ARROW(下方向键)   | 缩小图片                   |

## 示例

```vue
<template>
  <div>
    <button @click="showViewer = true">预览图片</button>
    <imgs-viewer
      v-model="showViewer"
      :initial-index="imageIndex"
      close-on-click-mask
      :closeOnPressEscape="false"
      :img-list="imgList"
    />
  </div>
</template>

<script>
import ImgsViewer from 'vue-imgs-viewer'
import 'vue-imgs-viewer/dist/index.css'
export default {
  components: { ImgsViewer },
  data() {
    return {
      showViewer: false,
      imageIndex: 0,
      imgList: [
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
        {
          url: '图片地址',
          title: '图片名称', //可以没有
        },
      ],
    }
  },
  methods: {},
}
</script>

<style></style>
```

---
_Source: https://npm.io/package/vue-imgs-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._