vue cool select

Текущая версия — 3.x , если вы ищете 2.x , вы можете найти ее здесь (также см. критические изменения).

Гибкий выбор

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

Функции

• нет зависимостей

• реквизиты (30) позволяют настраивать компонент различными способами.

• слоты (13) позволяют менять контент где угодно

• события (8) сообщат обо всем

• автозаполнение (можно использовать пользовательский поиск, также можно отключить ввод поиска)

• управление с клавиатуры (не только через стрелки)

• поддержка на мобильных устройствах

• проверка, состояние ошибки и успех

• отключен и доступен только для чтения

• малые и большие размеры (как в бутстрапе)

• возможность установки своих стилей, можно написать тему с нуля. 2 темы: Bootstrap 4 (одинаковые стили), Material Design.

• Поддержка TypeScript

• навигация по вкладкам

• SSR (серверный рендеринг)

• автоматически определяет подходящую позицию для меню, если оно выходит за пределы области просмотра

Пишите свои предложения, буду рад добавить.

Установка

yarn add vue-cool-select или npm install --save vue-cool-select

Начать

НПМ

1. Импортируйте этот плагин, css (тему) и добавьте плагин через Vue.use :

 import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue . use ( CoolSelectPlugin )

2. Используйте внутри другого компонента:

 import { CoolSelect } from 'vue-cool-select'

export default {
  components : { CoolSelect } ,
  data ( ) {
    return {
      // simple example of items
      items : [ 'Item 1' , 'Item 2' , 'Item 3' ] ,
      // there will be a selected item
      selected : null
    }
  }
}

3. Добавить в <template> :

< cool-select
  v-model = " selected "
  : items = " items "
/>

Браузер (CDN)

Включите vue-cool-select на страницу.

 < script src =" https://unpkg.com/vue-cool-select " > </ script >

<!-- paste the line below only if you need "bootstrap" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css " >
<!-- paste the line below only if you need "material-design" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/material-design.css " >

Если на странице обнаружен Vue, плагин устанавливается автоматически.

---

Документация и примеры здесь.

TODO

• множественный выбор
• 100% покрытие тестами

Я рад что-то добавить или улучшить, вы можете написать то, что хотите увидеть. У меня также будет больше мотивации к работе, если вы поставите звезду, спасибо! ?