Home
Other
Select Box Like Element Picker Component For Vue 3

Select Box Like Element Picker Component For Vue 3

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:

Select Box Like Element Picker Component For Vue

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 and autofocus attributes with isDisabled and isAutofocus 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

You Might Be Interested In:

Related Posts

Tags:,

Add Comment