Description:
A user-friendly dropdown picker component that behaviors like the native select element.
How to use it:
1. Import and register the picker component.
import { VuePicker, VuePickerOption } from '@invisiburu/vue-picker' // optional css import '@invisiburu/vue-picker/dist/vue-picker.min.css'
Vue.component('VuePicker', VuePicker) Vue.component('VuePickerOption', VuePickerOption)
2. Add a basic picker component to the app.
<vue-picker v-model="language" autofocus> <vue-picker-option value="">Empty</vue-picker-option> <vue-picker-option value="js">JavaScript</vue-picker-option> <vue-picker-option value="html">HTML</vue-picker-option> <vue-picker-option value="css">CSS</vue-picker-option> </vue-picker>
3. Possible props & events for the VuePicker
component.
- autofocus: auto focus on mount
- disabled: disable the component
- value: define your value here
- placeholder: placeholder text
- @input: when an option is selected
- @open: when opened
- @close: after closed
4. Possible props & events for the VuePickerOption
component.
- disabled: disable the option
- value: define your value here
- text: text to be displayed instead of the content of the default slot
Preview:
Changelog:
v2.1.0 (01/05/2022)
- Added onKeyDown prop to override/extend the key down listener
v2.0.5 (11/18/2021)
- Focus of null openerRef issue
v2.0.4 (09/25/2021)
- Bugfix
v2.0.3 (09/09/2021)
- Bugfix
v2.0.2 (06/07/2021)
- Now supports only Vue3 version.
- Replaced
disabled
andautofocus
attributes withisDisabled
andisAutofocus
boolean props. - Renamed css modifier selectors.
- The opener’s text is now immediately updated on navigation with up and down arrows in the open dropdown.
v2.0.2 (06/08/2021)
- Bugfixed
v1.1.2 (03/06/2021)
- Fixed Deps security issues
Download Details:
Author: invisiburu
Live Demo: https://invisiburu.github.io/vue-picker/
Download Link: https://github.com/invisiburu/vue-picker/archive/master.zip
Official Website: https://github.com/invisiburu/vue-picker
Install & Download:
# NPM
$ npm i @invisiburu/vue-picker --save