Vue multiselect

Для некоего проекта понадобился компонент multiselect, который бы подгружал варианты асинхронно и отображал бы выбранные варианты строкой. Тоесть нечто подобное, что есть у WordPress при прикреплении тагов к заметке.

Скрин vue-multiselect
Скрин vue-multiselect

На Vue-awesome прошелся по секции Type Select.

Дают пользователю выбрать таг или что-то еще в процессе набора текста

  • vue-tagsinput – простой ввод тагов (47 звезд)
  • vue-input-tag – простой ввод тагов (112 звезд)
  • v-distpicker – а это выбор провинций и городов в них.
  • vue-img-inputer – красивый и настраиваемый <input type=”file”/>

Первые 2 компонента слишком просты. Вторые 2 выполняют совершенно другие функции.

Затем осмотрел секцию Autocomplete.

Autosuggest / autocomplete / typeahead

Оба этих компонента дают возможность выбрать вариант из списка. Список динамически меняет свое содержимое в зависимости от того, что ввел пользователь. Вводимая строка является фильтром для списка.

Получается нам нужен гибрид чего-то типа v-autocomplete (или vue-instant) с чем-то вроде vue-tagsinput (или vue-input-tag).

И такие компоненты есть. Это

  • vue-multiselect – 1466 звезд
  • vue-select  – 1018 звезд; функционал как у jQuery Select2, но только без jQuery.

Функционал их очень похож. Не знаю кто кого из них заборет. Пока по числу звезд, как видно, лидирует vue-multiselect. Документация легко читается и красиво оформлена. Далее приведу список возможностей этого пакета.

  • Выбор одного пункта
  • Выбор нескольких пунктов
  • Отображение выбора в виде тагов
  • Выбор из выпадающего списка
  • Пункты выпадающего списка могут объединяться в группы
  • Поиск (фильтрация) набором текста
  • Логика разбита на миксины
  • Поддержка V-model
  • Поддержка Vuex
  • Подгрузка вариантов выбора асинхронно
  • Более 99% покрыто тестами
  • Хорошо конфигурируется (имеет множество опций)

Продуктивной работы!

UPD: На данный момент код из примеров не совсем работает на Vue.js 2 пришлось искать решение.

Оказалось помогает установка бетта-версии:

npm install vue-multiselect@next --save

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *