1.2.1 • Published 4 years ago
@pbartkowicz/vueselect v1.2.1
Table of contents
General
Simple select vue component, that allows you to control selected options from array
component is created with:
- Vue 2.6.10
Setup
install module locally with npm or yarn
npm i @pbartkowicz/vueselect
or
yarn add @pbartkowicz/vueselect
Usage
Import
import vueselect from '@pbartkowicz/vueselect'
Register in components section
components:{
vueselect,
},
Define array with select options
data(){
return{
yourArrayWithOptions:[
'option1',
'option2',
'option3'
],
output: '',
}
}
Use component in your code
<vueselect :options="yourArrayWithOptions" v-model="output"/>
You can always define array with objects
data(){
return{
yourArrayWithOptions:[
{id: 1, name: 'option1'},
{id: 2, name: 'option2'},
{id: 3, name: 'option3'}
],
output: '',
}
}
And then use label prop for displayed value in select, and reduce prop for key in object for select output
<vueselect :options="yourArrayWithOptions" label="name" reduce="id" v-model="output"/>
For option named 'option2' output will be '2'
Object options
When you will define array with objects, you can pass in to objects two options:
Option | Type | Default | Required | Description |
---|---|---|---|---|
class | String | No | Name of class for option. | |
hide | Boolean | No | Option to hide item. |
data(){
return{
yourArrayWithOptions:[
{id: 1, name: 'option1', class: 'your-class-for-option'},
{id: 2, name: 'option2', hide: true},
{id: 3, name: 'option3'}
],
output: '',
}
}
In this case 'option1' will have class "your-class-for-option" and 'option2' will not be displayed
Props
Prop | Type | Default | Required | Description |
---|---|---|---|---|
options | Array | No | Array with select options. | |
label | String | No | Displayed value in select for array with objects. | |
reduce | String | No | Select key in object for vueselect component output. | |
searchable | Boolean | false | No | Enable search in options |
clearable | Boolean | false | No | Enable clear possibility |
multiselect | Boolean | false | No | Enable multiselect - output changes to array |
customClasses | Object | No | Allows to add custom classes to elements. Use as keys in object: selected, search, clearIcon, dropdownIcon, dropdown, checkbox |
Slots
Slot | Description |
---|---|
noOptions | Default value "no options". |
icon | Slot for icon. |
clear-icon | Slot for clear icon. |
Example:
<vueselect :options="yourArrayWithOptions" label="name" reduce="id" v-model="output">
<template v-slot:noOptions>
No avaible options
</template>
<vueselect/>
Patch notes
1.2.1
- Changed keywords for npm
1.2.0
- Added multiselect
- Added clear button
- Added custom classes for elements
- Added slot for clear icon
1.1.0
- Added search possibility
- Dynamic position of dropdown depending on the avaible space
- Dynamic tooltip
- Added slot for icon