# vue-directive-image-previewer

> A Vue.js project for tag img, click img to zoom out to full screen.

## Build Setup

``` bash
# install vue-directive-image-previewer
npm install vue-directive-image-previewer -D

# main.js
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)	
or
Vue.use(VueDirectiveImagePreviewer, {
  background: {     // or : background: '#000'
    color: '#000' // or rgba or rgb     // or image: 'url(xxx)'
  },
  // transition
  animate: {
    duration: 600,
    delay: 500
  },
  // loading (not supported)
  loading: {
    image: ''
  },
  // cursor(css)
  cursor: 'pointer',
  clickMethod: 'doubleClick'   // click or doubleClick(not supported)
})

# use this directive
<img v-image-preview src="some-pic-url"/>
or 
<img v-image-preview="some-pic-url or another-pic-url" src="some-pic-url"/>
or
<img v-image-preview="{src: 'some-pic-url or another-pic-url'}" src="some-pic-url"/>
```

## Github
[github](https://github.com/wszxdhr/vue-directive-image-previewer.git)   Why not Star? Why? Come on!

> Welcome to give me some advise or help me to make the code stronger, thanks!

## Demo

http://demo.image-previewer.anymelon.com

## Api    (updated at 2018-08-14)

### options(in Vue.use())(Global Settings)

| API                          | TYPE          | EXAMPLE                                  | DEFAULT           | DESCRIBE                                 |
| ---------------------------- | ------------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
| background                   | String / JSON | "#000000" or "rgba(0, 0, 0, 0.5)" or {backgroundColor: "#000000"} | {backgroundColor:"#000000"} | Background css of wrapper                |
| animate     | JSON           | {duration: 500, delay: 300, func: "linear"} | {duration: 500}   | Transition css of image(field "duration" must be Number) |
| loading（not support yet）     | JSON        | {pictureUrl: "http://somePicUrl"}        | undefined         | Settings of image when it is loading     |
| cursor      | String         | (whatever of css cursor)   | "pointer"                   | Cursor css of image which has directive "v-image-preview" |
| clickMethod（not support yet)| String        | "click" / "doubleClick"                  | "click"           | Method of opening image, **not for closing** |
| copy                         | Boolean       | true / false                             | true              | if copy === true, when previewer is showing, the original picture will not disappear, on the contrary, it will disappear(by setting visibility: hidden;)|
| zIndex                       | Number        | 1000                                     | 1                 | css 'z-index' of outermost wrapper       |
| maxWidth                     | Number || String | 1000  or '1000px' or '100%'           | undefined         | max width of previewer       |
| maxHeight                    | Number || String | 1000  or '1000px' or '100%'           | undefined         | max height of previewer      |
| previewSize                  | Number || String | 2 (previewer.width = image.width * 2, previewer.height = image.height * 2)  or '20%'                   | undefined         | how many times of the previewer with image       |

### options(in directive)(Setting only for Element itself)

| API        | TYPE   | EXAMPLE               | DEFAULT      | DESCRIBE                                 |
| ---------- | ------ | --------------------- | ------------ | ---------------------------------------- |
| ALL        | String | "http://some-pic-url" | src of <img> | This is for only set in a String, like v-image-preview="some-pic-url". |
| background                   | String / JSON | "#000000" or {backgroundColor: "#000000"} | {backgroundColor:"#000000"} | Background css of wrapper                |
| src | String | "http://some-pic-url" | src of <img> | When you want to set another optioins of directive, use this. |
| cursor      | String        | (whatever of css cursor)                 | "pointer"         | Cursor css of image which has directive "v-image-preview" |
| animate     | JSON          | {duration: 500, delay: 300, func: "linear"} | {duration: 500}   | Transition css of image(field "duration" must be Number) |
| copy        | Boolean       | true / false                             | true              | if copy === true, when previewer is showing, the original picture will not disappear, on the contrary, it will disappear(by setting visibility: hidden;)|
| zIndex                       | Number        | 1000                                     | 1                 | css 'z-index' of outermost wrapper       |
| maxWidth                     | Number || String | 1000  or '1000px' or '100%'           | undefined         | max width of previewer       |
| maxHeight                    | Number || String | 1000  or '1000px' or '100%'           | undefined         | max height of previewer      |
| previewSize                  | Number || String | 2 (previewer.width = image.width * 2, previewer.height = image.height * 2)  or '20%'                   | undefined         | how many times of the previewer with image       |

## ChangeLog

### 2018-8-14

Add APIs: maxWidth, maxHeight, previewSize