Multiselect-dl
multiselect is a
vue
component used to select multiple options at the same time. This component only has basic and general style and the users can style it the way they want, that's why this component can be used in any vue project.
Install
npm install --save multiselect-dl
Global Use
in your main.js
;; Vue;
The global way includes the
Tag
component.
Local Use
in your .vue
file
;
In Nuxt
import vue
file directly (multiselect-dl.vue
).
;
only SSR
;
How to use
Props
name | value | comments |
---|---|---|
clearable | boolean | hide or show the "x" button. Clear all selected items from input. |
menuMaxHeight | string | menu max height. Default auto . |
minHeight | string | menu min height. Default 0.5rem . |
multiselect | boolean | If It's true multi selections is available but It's false only simple selection is available |
selectAll | boolean | It works in multi selections and with select-all-items slot. This prop select / unselect all items in menu items |
options | array | options to show in menu items |
prop | string | object's prop. This is required when you use objects and its value It has to be unique. |
transitionName | string | The name of the vue-transition . |
transitionMode | string | The name of the vue-transition mode (out-in / in-out ). Default out-in . |
Slots
name | Description |
---|---|
tag | slot for item selected in the input. props = { tag }. Tag is a selected item and can be one or more. |
clear-icon | slot for icon to clear selected items |
menu-activator | slot for icon to activate menu |
menu | slot for menu (menu items). props = { menuItem, selected, menuIndex } |
Multiselector
Multiselector {{tag.name}} ☝ ☓ ♥ Todos ♥ {{menuItem.name}}
;; { return options: id: 1 name: 'Juan' id: 2 name: 'Noah' id: 3 name: 'Churry' id: 4 name: 'Kaki' id: 5 name: 'Pepito' optionsSelected: ;} name: 'app' components: MultiSelect Tag data;
body #app h4 .flex-display .items-center .justify-between .justify-end .justify-center .multi-select-container .menu-item .menu-item:hover .menu-item-selected,.selected-icon .vertical-enter-active, .vertical-leave-active .vertical-enter, .vertical-leave-to .selected-icon
Simple Selector
Selector simple con string {{tag}} ☝ ☓ ♥ {{menuItem}}
;; { return stringOptions: 'Rojo' 'Azul' 'Verde' 'Morado' 'Blanco' 'Negro' 'Amarillo' stringSelection: '' ;} name: 'app' components: MultiSelect Tag data;