Когда подбирается плагин для формы, то хочется видеть максимальную гибкость. Именно это и предлагает, в первую очередь, библиотека 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>
Все, кастомный селект у Вас. Полный список примеров можно найти на странице демо (ссылка выше).
