Vue-multiselect

Вероятно, самое полное решение для выбора в Vue.js 2.0 без jQuery.

Скриншоты

• Vue-Multiselect Screen

  Внешний вид программы.

Документация

Посетите: vue-multiselect.js.org/#sub-getting-started

Спонсоры

Золото

Серебро

Бронза

Характеристики и функции:

• Нет зависимостей.
• Одиночный выбор.
• Множественный выбор.
• Пометка.
• Выпадающие списки.
• Фильтрация.
• Поиск с предложениями.
• Логика разделена на миксины.
• Базовый компонент и поддержка пользовательских компонентов.
• Поддержка V-модели.
• Поддержка Vuex.
• Асинхронная поддержка опций.
• Покрытие тестами более 95%.
• Полностью настраиваемый (см. список реквизитов ниже).

Критические изменения:

• Вместо Vue.partial для пользовательских шаблонов параметров можно использовать пользовательскую функцию рендеринга.
• Реквизиты :key были заменены на :track-by из-за конфликтов с Vue 2.0.
• Поддерживается v-model.
• @update был заменён на @input, чтобы также работать с v-моделью.
• :selected был изменён на :value по той же причине.
• Пользователи Browserify: если вы хотите импортировать файлы .vue, добавьте преобразование vueify.

Установка и базовое использование

npm install vue-multiselect

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        selected: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

JSFiddle

Пример JSFiddle — используйте это для воспроизведения проблемы.

Примеры

В jade-lang/pug-lang

Одиночный выбор / раскрывающийся список

multiselect(
  :value="value",
  :options="source",
  :searchable="false",
  :close-on-select="false",
  :allow-empty="false",
  @input="updateSelected",
  label="name",
  placeholder="Select one",
  track-by="name"
)

Одиночный выбор с поиском

multiselect(
  v-model="value",
  :options="source",
  :close-on-select="true",
  :clear-on-select="false",
  placeholder="Select one",
  label="name",
  track-by="name"
)

Множественный выбор с поиском

multiselect(
  v-model="multiValue",
  :options="source",
  :multiple="true",
  :close-on-select="true",
  placeholder="Pick some",
  label="name",
  track-by="name"
)

Пометка

с событием @tag

multiselect(
  v-model="taggingSelected",
  :options="taggingOptions",
  :multiple="true",
  :taggable="true",
  @tag="addTag",
  tag-placeholder="Add this as new tag",
  placeholder="Type to