vue-selector-multioption

Index

• Description
• Live demo
• Usage
• Global parameterization
• Shorcuts
• Properties
• Return

Description

This is a fast-implement vue multioption select.

Advices, recommendations... are welcome ❤️

Live Demo

https://jsfiddle.net/Ln9q4aob/55/

TODO List

• [ ] Create a external page with explanations and demos

Usage

There are two ways of usage

Global Scoped

1. Add your import on top of your main.js and add as a Vue plugin

import Vue from 'vue';
import  VueSelectorMultioption  from  'vue-selector-multioption';
Vue.use(VueSelectorMultioption);

2. Use it wherever you want

<vue-selector-multioption :options="options.roles"  v-model="parameters.roles" />

Local scoped (DO NOT ACCEPT PARAMETERIZATION)

1. Add your import on top of you vue file.

import  VueSelectorMultioption  from  'vue-selector-multioption';

2. Add as a component into you Vue view/component.

components: {
	VueSelectorMultioption
}

3. Add the component's tag into your template.

<VueSelectorMultioption :options="options.roles"  v-model="parameters.roles" />

Global parameterization

• i18n: Labels customization
  • noOptionsSelected
  • noResultsFound
  • inputPlaceholder

  Example

      import VueSelectorMultioption from 'vue-selector-multioption'
      Vue.use(VueSelectorMultioption, {
          i18n: {
              noOptionsSelected: "No se encontraron resultados",
              noResultsFound: "Selecciona una opcion",
              inputPlaceholder: "¿Qué buscas?"
          }
      })

Shortcuts

Note: Shortcuts only work with the options list opened

Key	Action
Arrow - Down	Navigates downward between options
Arrow - Up	Navigates upward between options
Enter	Select the focused option when navigating
ESC	Close the options list

Properties

• options This is a Object with attributes "label" and "value" whose will be displayed on the dropdown.
• v-model If you work with vue, you know that. Set there the parameter where the component will emit the value.

Return

Array of selected values. Values will be those given in the "options" parameter.