vue select

vue-select

Alles, was Sie sich vom HTML- <select> -Element wünschen, verpackt in einer leichten, erweiterbaren Vue-Komponente ohne Abhängigkeiten.

Vue Select ist eine funktionsreiche Auswahl-/Dropdown-/Typeahead-Komponente. Es bietet eine Standardvorlage, die für die meisten Anwendungsfälle für ein filterbares Auswahl-Dropdown-Menü geeignet ist. Die Komponente ist so leicht wie möglich gestaltet und behält gleichzeitig hohe Standards für Zugänglichkeit, Entwicklererfahrung und Anpassung bei.

• Markieren
• Filtern / Suchen
• Vuex-Unterstützung
• AJAX-Unterstützung
• SSR-Unterstützung
• Zugänglich
• ~20 KB insgesamt / ~5 KB CSS / ~15 KB JS
• Wählen Sie Einzel-/Mehrfachoptionen
• Anpassbar mit Slots und SCSS-Variablen
• Keine Abhängigkeiten

Dokumentation

Vollständige Dokumentation und Beispiele verfügbar unter https://vue-select.org.

• API-Dokumentation
• Vue 2 CodePen-Vorlage
• Vue 3 CodePen-Vorlage

Sponsoren?

Es erfordert viel Aufwand, dieses Projekt aufrechtzuerhalten. Wenn Sie dadurch Entwicklungszeit gespart haben, denken Sie bitte darüber nach, das Projekt mit GitHub-Sponsoren zu sponsern!

Ein großes Dankeschön an die Sponsoren und Mitwirkenden, die Vue Select möglich machen!

Fangen Sie an

Vue 3 / Vue Select 4.x-Beta

Vue 3-Unterstützung ist auf dem beta -Kanal verfügbar: vue-select@beta und wird zum neuen Standard, wenn v4 veröffentlicht wird. Weitere Informationen finden Sie unter #1579!

Installieren:

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

Anschließend importieren und registrieren Sie die Komponente:

# 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" ) ;

Die Komponente selbst enthält kein CSS. Sie müssen es separat in Ihre Component.vue aufnehmen:

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

Vue 2 / Vue Select 3.x

Installieren:

yarn add vue-select

# or use npm

npm install vue-select

Anschließend importieren und registrieren Sie die Komponente:

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

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

Die Komponente selbst enthält kein CSS. Sie müssen es separat hinzufügen:

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

Sie können vue-select auch direkt im Browser einbinden. Sehen Sie sich die Dokumentation zum Laden aus CDN an.

Lizenz

MIT