Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.

Vue-multiselect — лучший плагин для селекта на VueJS

Когда подбирается плагин для формы, то хочется видеть максимальную гибкость. Именно это и предлагает, в первую очередь, библиотека Vue-multiselect в проектах на VueJS.

Постановка задачи

Что, как правило, мы хотим от работы кастомного select-плагина, который меняет нам внешний вид печально выглядевшего дефолтного поля с выпадающим списком? Верно, свое оформление и удобное использование на любом устройстве и браузере. Однако, чем больше мы знакомимся с таким инструментом, тем больше приходим к мысли, что хочется чего-то большего.

Vue-multiselect — это разносторонний плагин, который может абсолютно все, что Вы хотели бы видеть от скрипта в этой тематики.

Основные преимущества

  • Гибкость — может быть настроен и переработан по шаблону полностью;
  • Скорость — относительно быстро соображает, за исключением случае, которые опишем ниже;
  • Полная кастомизация — можно вставлять в опшены свои картинки, видео и прочее;
  • Легкая настройка и интеграция в уже готовый проект;
  • Подробная документация и фантастически практичные примеры;
  • Идеальный мультиселект, с возможностью оформления опшенов в теги и т. д.;
  • Есть обработчики события на все случаи жизни;
  • Поддержка Vuex — что очень приветствуется на больших проектах.

Минусы плагина

  • Иногда приходится попотеть с реактивностью, данные не всегда успевают отрисоваться;
  • Изредка приходится прибегать к setTimeout для корректной реактивности.
  • Могут быть проблемы с пользовательской валидацией, а точнее с ее UI.

Больше минусов не обнаружено.

Использование

Ставим через NPM:

npm install vue-multiselect --save

Или подключаем CDN:

<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

Далее все мега-просто:

<!-- Vue component -->
<template>
  <div>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'

  // register globally
  Vue.component('multiselect', Multiselect)

  export default {
    // OR register locally
    components: { Multiselect },
    data () {
      return {
        value: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
  your styles
</style>

Все, кастомный селект у Вас. Полный список примеров можно найти на странице демо (ссылка выше).