vue select

vue-выбрать

Все, что вы хотите, чтобы элемент HTML <select> мог делать, заключено в легкий, расширяемый компонент Vue с нулевой зависимостью.

Vue Select — это многофункциональный компонент выбора/раскрывающегося списка/ввода текста. Он предоставляет шаблон по умолчанию, который подходит для большинства случаев использования фильтруемого раскрывающегося списка выбора. Компонент спроектирован так, чтобы быть максимально легким, сохраняя при этом высокие стандарты доступности, опыта разработчика и настройки.

• Тегирование
• Фильтрация/Поиск
• Поддержка Вуэкса
• Поддержка AJAX
• Поддержка реформирования безопасности
• Доступный
• ~20 КБ всего/~5 КБ CSS/~15 КБ JS
• Выберите один/несколько вариантов
• Настраивается с помощью слотов и переменных SCSS.
• Нулевые зависимости

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

Полная документация и примеры доступны на https://vue-select.org.

• API-документация
• Шаблон Vue 2 CodePen
• Шаблон Vue 3 CodePen

Спонсоры?

Для поддержания этого проекта требуется много усилий. Если это сэкономило вам время на разработку, рассмотрите возможность спонсирования проекта спонсорами GitHub!

Огромное спасибо спонсорам и участникам, благодаря которым Vue Select стал возможным!

Начать

Vue 3 / Vue Select 4.x-бета

Поддержка Vue 3 находится на beta -канале: vue-select@beta и станет новой версией по умолчанию после выпуска v4 . См. #1579 для более подробной информации!

Установить:

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

Затем импортируйте и зарегистрируйте компонент:

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

Сам компонент не содержит CSS. Вам нужно будет включить его отдельно в свой Component.vue:

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

Vue 2/Vue Select 3.x

Установить:

yarn add vue-select

# or use npm

npm install vue-select

Затем импортируйте и зарегистрируйте компонент:

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

Сам компонент не содержит CSS. Вам нужно будет включить его отдельно:

 import "vue-select/dist/vue-select.css" ;

Вы также можете включить vue-select прямо в браузере. Ознакомьтесь с документацией по загрузке из CDN..

Лицензия

Массачусетский технологический институт