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:

Changelog:

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: