vue-directive-image-previewer

2.2.2 • Public • Published

vue-directive-image-previewer

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

Build Setup

# 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 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%'
maxHeight Number String 1000 or '1000px' or '100%'
previewSize Number String 2 (previewer.width = image.width * 2, previewer.height = image.height * 2) or '20%'

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

API TYPE EXAMPLE DEFAULT DESCRIBE
ALL String "http://some-pic-url" src of 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 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%'
maxHeight Number String 1000 or '1000px' or '100%'
previewSize Number String 2 (previewer.width = image.width * 2, previewer.height = image.height * 2) or '20%'

ChangeLog

2018-8-14

Add APIs: maxWidth, maxHeight, previewSize

Package Sidebar

Install

npm i vue-directive-image-previewer

Weekly Downloads

122

Version

2.2.2

License

MIT

Unpacked Size

2.51 MB

Total Files

13

Last publish

Collaborators

  • wszxdhr