vue-selector-multioption

Index

Description

This is a fast-implement vue multioption select.

Advices, recommendations... are welcome :heart:

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

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.