Originally developed by https://github.com/mazipan/vue-select-image. This version adds a couple of new features.
# NPM
npm i makitosan/vue-select-image --save
import VueSelectImage from 'vue-select-image'
// add stylesheet
require('vue-select-image/dist/vue-select-image.css')
components: { VueSelectImage }
Vue.use(VueSelectImage)
[{
id: '1',
src: 'https://unsplash.it/200?random',
alt: 'Alt Image 1'
}, {
id: '2',
src: 'https://unsplash.it/200?random',
alt: 'Alt Image 2'
}]
<vue-select-image :dataImages="dataImages"
@onselectimage="onSelectImage">
</vue-select-image>
onselectimage
will return emitted with parameter object image selected
<vue-select-image :dataImages="dataImages"
:is-multiple="true"
:selectedImages="initialSelected"
@onselectmultipleimage="onSelectMultipleImage">
</vue-select-image>
onselectmultipleimage
will return emitted with parameter list of object images selected
Attribute | Type | Default | Description |
---|---|---|---|
:dataImages | Array | [] | Array of images that will be shown |
:selectedImages | Array | [] | Array of initial selected images |
:isMultiple | Boolean | false | Flag to enable multiple selection |
:useLabel | Boolean | false | Flag to enable showing alt as label |
:rootClass | String | vue-select-image | Class for root element of this component |
:activeClass | String | --selected | Class for active state, will concat with :rootClass |
:h | String | auto | Height of images, ex: '50px' |
:w | String | auto | Width of images, ex: '50px' |
Events Attr | Return |
---|---|
@onselectimage | Object image selected |
@onselectmultipleimage | Array of object image has been selected |
Example can be found here :
Thanks for inspiration : https://github.com/rvera/image-picker
If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.
Hope will usefull for you all.
Copyright © 2018 makitosan