# vue2-picture

> A Vue integration PhotoSwipe image preview plugin

Latest version **1.0.6** (published 2018-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-picture
pnpm add vue2-picture
yarn add vue2-picture
bun add vue2-picture
```

## 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.6 |
| Published | 2018-08-03 |
| First published | 2018-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 482.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | yuezm |
| Maintainers | yuezm |
| Keywords | vue, preview, photoswipe, picture, rotate, zoom in and out |

## Links

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

## Dependencies (1)

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

## Recent versions

- 1.0.6 (latest) — 2018-08-03
- 1.0.5 — 2018-07-26
- 1.0.4 — 2018-07-26

## README

# vue-picture

> A Vue Integrated [vue-preview](https://github.com/yuezm/vue-picture)  Image Preview Plugin
## Requirements

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

## Demo
    git clone https://github.com/yuezm/vue-picture.git
    open index.html in browser
或者访问[VuePicture示例](http://47.98.176.169/VuePicture/)

## Usage

Notice:
 - **需要至少vue2.5以上版本**
 - **在vue-preview基础上,增加旋转功能**
 - **如果未传入w或者h,则宽高自适应**

Download
- npm i -S vue2-picture
```
-- app.js

import VuePicture from 'vue2-picture'

 // defalut install
 Vue.use(VuePicture)

 // 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
 })
```

```
-- template

    <template>
      <vue-picture :slides="slides"></vue-preview>
    </template>

    <script>

    export default {
        data () {
          return {
            slides: [
              {
                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',
              }
            ]
          }
        },
      }
    </script>
```

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