vue cool select

Die aktuelle Version ist 3.x Wenn Sie nach 2.x suchen, können Sie sie hier finden (siehe auch Breaking Changes).

Flexible Auswahl

Demo + Dokumentation

Merkmale

• keine Abhängigkeiten

• Mit props (30) können Sie eine Komponente auf verschiedene Weise anpassen

• Steckplätze (13) ermöglichen den Inhaltswechsel überall

• Veranstaltungen (8) informieren Sie über alles

• Autovervollständigung (Sie können die benutzerdefinierte Suche verwenden, Sie können die Sucheingabe auch deaktivieren)

• Tastatursteuerung (nicht nur über die Pfeile)

• Unterstützung auf mobilen Geräten

• Validierung, Fehlerstatus und Erfolg

• deaktiviert und schreibgeschützt

• kleine und große Größen (wie im Bootstrap)

• Durch die Möglichkeit, eigene Stile festzulegen, können Sie ein Thema von Grund auf neu schreiben. 2 Themen: Bootstrap 4 (gleiche Stile), Material Design

• TypeScript-Unterstützung

• Tab-Navigation

• SSR (Serverseitiges Rendering)

• Bestimmen Sie automatisch die geeignete Position für das Menü, wenn es über das Ansichtsfenster hinausgeht

Schreiben Sie Ihre Vorschläge, gerne füge ich sie hinzu.

Installation

yarn add vue-cool-select oder npm install --save vue-cool-select

Fangen Sie an

NPM

1. Importieren Sie dieses Plugin, CSS (Theme) und fügen Sie das Plugin über Vue.use hinzu:

 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. Verwendung innerhalb einer anderen Komponente:

 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. Zur <template> hinzufügen:

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

Browser (CDN)

Fügen Sie vue-cool-select in die Seite ein.

 < 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 " >

Wenn Vue auf der Seite erkannt wird, wird das Plugin automatisch installiert.

---

Dokumentation und Beispiele hier.

TODO

• Mehrfachauswahl
• 100 % Testabdeckung

Ich freue mich, etwas hinzuzufügen oder zu verbessern, Sie können schreiben, was Sie sehen möchten. Ich habe auch mehr Arbeitsmotivation, wenn du einen Stern gibst, danke! ?