# vue-preview

> A Vue integration PhotoSwipe image preview plugin

Latest version **1.1.3** (published 2018-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-preview
pnpm add vue-preview
yarn add vue-preview
bun add vue-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.1.3 |
| Published | 2018-03-14 |
| First published | 2016-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 68.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 636 |
| Author | LiuSong [347139089@qq.com] |
| Maintainers | liu-song |
| Keywords | vue, preview, photoswipe |

## Links

- npm: https://www.npmjs.com/package/vue-preview
- Repository: https://github.com/LS1231/vue-preview
- Homepage: https://github.com/LS1231/vue-preview#readme
- Issues: https://github.com/LS1231/vue-preview/issues
- npm.io page: https://npm.io/package/vue-preview

## Dependencies (1)

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

## Recent versions

- 1.1.3 (latest) — 2018-03-14
- 1.1.2 — 2018-03-14
- 1.1.1 — 2018-03-14
- 1.1.0 — 2018-03-14
- 1.0.5 — 2016-10-26
- 1.0.4 — 2016-10-11
- 1.0.3 — 2016-10-11
- 1.0.2 — 2016-10-11
- 1.0.1 — 2016-10-11
- 1.0.0 — 2016-10-11

## README

# Vue preview plugin

> 一 A Vue Integrated [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe) Image Preview Plugin

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

## Requirements

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

## Demo

[Live Demo >>](https://ls1231.github.com/vue-preview/)

## Installation

``` bash
npm i vue-preview -S
```

## Usage

Notice:
 - This plugin currently support vue2.5 and above


### Install plugin

``` javascript
import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

// with parameters install
Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})
```

### Examples

```html
<template>
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>

<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>
```

### Prop

##### slide item options

|  Property | Description
| :---  | :---
| src   | main (large) image
| msrc  | small image
| alt   | image replacement text
| w     | image width
| h     | image height

### Events

|  Event name | Description | parameter
| :---  | :--- | :---
| close   | close gallery | nothing

## License

[MIT](https://github.com/LS1231/vue-security-code/blob/master/LICENSE) Copyright (c) 2018 liusong

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