# v-preview-img

> 图片预览插件

Latest version **1.0.14** (published 2022-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-preview-img
pnpm add v-preview-img
yarn add v-preview-img
bun add v-preview-img
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2022-04-01 |
| First published | 2021-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 812.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Shi Fan |
| Maintainers | shifan |

## Links

- npm: https://www.npmjs.com/package/v-preview-img
- npm.io page: https://npm.io/package/v-preview-img

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 1.0.14 (latest) — 2022-04-01
- 1.0.13 — 2022-04-01
- 1.1.0 — 2021-09-15
- 1.0.12 — 2021-09-08
- 1.0.11 — 2021-08-26
- 1.0.10 — 2021-08-25
- 1.0.9 — 2021-08-18
- 1.0.8 — 2021-08-18
- 1.0.7 — 2021-08-18
- 1.0.6 — 2021-08-18
- 1.0.5 — 2021-08-18
- 1.0.4 — 2021-08-18
- 1.0.3 — 2021-08-18
- 1.0.2 — 2021-08-18
- 1.0.1 — 2021-08-18
- … 1 more at https://npm.io/package/v-preview-img/versions

## README

# v-preview-img

### 效果预览
![image](https://cdn.17kjs.com/public_server_file_/QdKRZX1629942947780)


### 安装
```
npm install --save v-preview-img
```

### 在组件中使用
```
<template>
  <div id="app">
    <preview-img
      :options="options"
      :exit="exitPreview"
      :data="previewImages"
    ></preview-img>
  </div>
</template>

<script>
import previewImg from 'v-preview-img'
 
export default {
  name: 'app',
  components: { previewImg },
  data() {
    return {
      options: { initImageIndex: 1 },
      previewImages: [
        'http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg',
        'http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg'
      ]
    }
  },
  methods: {
    exitPreview() {
      // ...
    }
  }
}
</script> 

```

### 使用说明
#### props

**data**

预览图片的队列
- type: `array`
- default: `['http://git.tsingzone.com/uploads/user/avatar/49/22771955.jpeg']`
- valid: `val.length > 0`

**options**

预览图片选项
- type: `object`
- default: 
```
{
   initImageIndex: 0,  // 配置初始位置，默认为0
   zoom: true,  // 配置缩放功能，默认开启
   rotate: true,  // 配置旋转功能，默认开启
   drag: false,  // 配置拖拽功能（图片显示不全时），默认关闭
   closeOnClickMask: false  // 是否点击遮罩层退出预览，默认否
}
```

**exit**

退出预览后的方法
- type: `function`
- default: `function() {}`

### Todo
- [x] 组件功能支持定制化（V1.1.0）
- [x] 图片显示不全时支持拖动图片（V1.1.0）
- [x] 支持点击蒙层退出预览（V1.1.0）
- [x] 放大、缩小、旋转变化添加动画效果（V1.1.0）
- [x] 支持通过鼠标滚轮放大缩小图片（V1.1.0）
- [x] 优化 css 命名，避免与项目中样式冲突（V1.0.12）

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