mazipan / Vue Select Image
Licence: mit
✅ Vue 2.x component for selecting image from list
Stars: ✭ 120
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Select Image
Useful Dev Tools
⭐️ A list with useful tools that help many Developers. Hacktoberfest ⭐️
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Pythonalgorithms
All Algorithms implemented in Python 3
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Dev Folio
🔥 A collection of Free Portfolio templates for developers.
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Lumos
💡 A light Swift wrapper around Objective-C Runtime
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Git Url Parse
✌️ A high level git url parser for common git providers.
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Monk gui
A Graphical user Interface for deep learning and computer vision over Monk Libraries
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Hacktoberfest2021
Raise Genuine PRs, Your PRs will be accepted, Star This Repo, You aren't allowed to Update README.md
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Lru Cache Node
A lighting fast cache manager for node with least-recently-used policy.
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Wp Graphql Yoast Seo
This is an extension to the WPGraphQL plugin for Yoast SEO
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Stryker4s
Mutation testing for Scala. Work in progress...
Stars: ✭ 118 (-1.67%)
Mutual labels: hacktoberfest
Angular Open Source Starter
This is a starter project for creating open-source libraries for Angular. It is a full fledged Angular workspace with demo application and easy library addition. It is designed to be used for open-sourcing libraries on Github and has everything you'd need ready for CI, code coverage, SSR testing, StackBlitz demo deployment and more.
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Pg ha migrations
Enforces DDL/migration safety in Ruby on Rails project with an emphasis on explicitly choosing trade-offs and avoiding unnecessary magic.
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Newsboat
An RSS/Atom feed reader for text terminals
Stars: ✭ 1,798 (+1398.33%)
Mutual labels: hacktoberfest
Unshort.link
Prevent short link services from tracking you by unshortening the urls for your
Stars: ✭ 119 (-0.83%)
Mutual labels: hacktoberfest
Axolotl
A Signal compatible cross plattform client written in Go and Vuejs
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Customizer
Kanboard - Customizer adds GUI for logo, favicon and themes
Stars: ✭ 120 (+0%)
Mutual labels: hacktoberfest
Freud
Powerful, efficient particle trajectory analysis in scientific Python.
Stars: ✭ 118 (-1.67%)
Mutual labels: hacktoberfest
✅ Vue Select Image
Vue 2.x component for selecting image from list
Demo
https://mazipan.github.io/vue-select-image/
Installation
# Yarn
yarn add vue-select-image
# NPM
npm i vue-select-image --save
How to use
Import
import VueSelectImage from 'vue-select-image'
// add stylesheet
require('vue-select-image/dist/vue-select-image.css')
Register components
components: { VueSelectImage }
Register as global component
Vue.use(VueSelectImage)
Sample Array Image
[{
id: '1',
src: 'https://unsplash.it/200?random',
alt: 'Alt Image 1'
}, {
id: '2',
src: 'https://unsplash.it/200?random',
alt: 'Alt Image 2'
}, {
id: '2',
src: 'https://unsplash.it/200?random',
alt: 'Alt Image 2',
disabled: true
}]
Field | Description |
---|---|
id | Unique id for each image, will also set for id attribute on image DOM |
src | Src attribute for image |
alt | Alt attribute for image |
disabled | Image disabled, can not be select |
Template
Single Selection
<vue-select-image
:dataImages="dataImages"
@onselectimage="onSelectImage">
</vue-select-image>
onselectimage
will return emitted with parameter object image selected
Multiple Selection
<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
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 |
Useful Methods (from v1.6.0)
Sometimes you need to access our internal methods via $refs
, you need to know this methods:
Methods Name | Use for |
---|---|
removeFromSingleSelected() | Reset selected image in single selection mode |
removeFromMultipleSelected() | Remove from selected list in multiple selection mode |
resetMultipleSelection(id) | Reset all selected list in multiple selection mode |
isExistInArray(id) | Will return object image if exist, undefined if not exist |
Example
Example can be found here :
Credit
Thanks for inspiration : https://github.com/rvera/image-picker
Support me
- Via trakteer
- Direct support, send me an email
Contributing
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 © 2017 Built with ❤️ by Irfan Maulana
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].