✅ Vue Select Image Vue 2.x component for selecting image from list

Single Selection

Image Selected :

Multiple Selection

Mutiple Image Selected :

Multiple Selection with Limit 2

Mutiple Image Selected :

Use Label

jQuery
Angular
Vue.js
React
I am disabled

Custom Active State

Custom Style

Image by http://placekitten.com

Download

        
# NPM
npm install vue-select-image

# Yarn
yarn add vue-select-image

How to use

        
import VueSelectImage from 'vue-select-image'
Vue.use(VueSelectImage)

// add stylesheet
require('vue-select-image/dist/vue-select-image.css')

Template

        
          
<!-- SINGLE SELECTION -->
<vue-select-image :dataImages="dataImages"
      @onselectimage="onSelectImage">
</vue-select-image>
      
          
<!-- MULTIPLE SELECTION -->
<vue-select-image :dataImages="dataImages"
      :is-multiple="true"
      :selectedImages="initialSelected"
      @onselectmultipleimage="onSelectMultipleImage">
</vue-select-image>

Available Props

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'
`:limit`	Number	0	To set maximum images can be select

Available Events

Events Attr	Return
`@onselectimage`	Object image selected
`@onselectmultipleimage`	Array of object image has been selected
`@onreachlimit`	When the length of selected images reach the limit

Contribute

Feel free to fork on GitHub if you have any features or bugs !