2.2.2 • Published 5 years ago
vue-directive-image-previewer v2.2.2
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%' | 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 | 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%' | 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
2.2.2
5 years ago
2.2.1
6 years ago
2.2.0
6 years ago
2.1.2
6 years ago
2.1.0
6 years ago
2.0.0
6 years ago
1.1.2
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.10
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago