# vue-photo-carousel-preview

> A Vue2 image preview plugin based on vue-preview

Latest version **1.6.1** (published 2018-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-photo-carousel-preview
pnpm add vue-photo-carousel-preview
yarn add vue-photo-carousel-preview
bun add vue-photo-carousel-preview
```

## 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.6.1 |
| Published | 2018-04-25 |
| First published | 2018-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tree_zhengyuming |
| Maintainers | qq25614112 |
| Keywords | vue, preview, photoswipe |

## Links

- npm: https://www.npmjs.com/package/vue-photo-carousel-preview
- Homepage: https://github.com/qq25614112/vue-photo-carousel-preview/issues
- Issues: https://github.com/qq25614112/vue-photo-carousel-preview/issues
- npm.io page: https://npm.io/package/vue-photo-carousel-preview

## Dependencies (1)

- [photoswipe](https://npm.io/package/photoswipe.md) ^4.1.1

## Recent versions

- 1.6.1 (latest) — 2018-04-25
- 1.5.1 — 2018-04-25
- 1.3.1 — 2018-04-25
- 1.2.1 — 2018-04-25
- 1.1.2 — 2018-04-25
- 1.0.2 — 2018-04-25

## README

# Vue preview plugin

> 一个Vue集成[PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)图片预览插件

>注意：此插件提供基于vue的图片预览功能

>author ： tree_zhengyuming
>email ：18718922627@163.com

![](https://img.shields.io/npm/dm/vue2-preview.svg)
![](https://img.shields.io/npm/v/vue2-preview.svg)

## Requirements

[PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)

## Based on

[vue-preview](https://github.com/LS1231/vue-preview)

## Installation

``` bash
npm install vue-photo-carousel-preview -S
```

## Usage

使用须知：

* 插件目前仅支持vue2.0以上版本
* img标签上的class不能去掉

如果你是使用vue-cli生成的项目，你需要修改`webpack.base.conf.js`文件中的loaders，添加一个loader。
原因：插件编写中使用了es6的语法，需要进行代码编译
``` javascript
{
    test: /vue-preview.src.*?js$/,
    loader: 'babel'
}
```

### Install plugin

``` javascript
import vuePhotoCarouselPreview from 'vue-photo-carousel-preview'
Vue.use(vuePhotoCarouselPreview)
```

### Examples

```
<template>
  <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
</template>

<script>
export default {
    data () {
      return {
        list: [{
          src: 'https://placekitten.com/600/400',
          w: 600,
          h: 400
        }, {
          src: 'https://placekitten.com/1200/900',
          w: 1200,
          h: 900
        }]
      }
    }
  }
</script>
```

### Mothods

插件提供以下两个方法,```vm```代表组件实例

#### vm.$preview.open(index, list, options)

参数说明：

| 参数  | 说明  |  类型  |  必需
| :--: | :--: | :--:  | :--:
| index     |当前图片的索引值|   Number |    是
| list      |图片列表       |   Array  |    是

#### vm.$preview.close()


## License

![](https://img.shields.io/badge/license-MIT-blue.svg)

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