vue multiselect

Vue-Multiselect

Dokumentation für Version 3

Die Dokumentation für v3.0.0 ist fast die gleiche wie bei v2.x, da sie größtenteils rückwärtskompatibel ist. Für die vollständigen Dokumente für V3 und frühere Versionen finden Sie unter: vue-multiselect.js.org

Funktionen und Eigenschaften:

• Keine Abhängigkeiten

• Einzelauswahl

• Mehrfach auswählen

• Tagging

• Dropdowns

• Filterung

• Suche mit Vorschlägen

• Logik in Mixins aufgeteilt

• Grundkomponente und Unterstützung für benutzerdefinierte Komponenten

• V-Model-Unterstützung

• Vuex -Unterstützung

• Asynchronisierungsoptionen Support

• Vollständig konfigurierbar (siehe Props -Liste unten)

Installieren und Grundnutzung

 npm install Vue-Multiselect@Weiter

 <Semplate>
  <div>
    <Vuemultiselect v-model = "ausgewählt": options = "options">
    </Vuemultiselect>
  </div>
</template> <script> vuemultiselect aus 'vue-multiselect'export Standard {Komponenten: {vuemultiselect}, data () {return {ausgewählt: null, optionen: [' liste ',', ',']}} }} </script> <style src = "vue-multiselect/dist/vue-multiselect.css"> </style>

Jsfiddle

Beispiel JSFIDDLE - Verwenden Sie dies für die Problemreproduktion.

Beispiele

Einzelauswahl / Dropdown

 <Vuemultiselect
  : Modell-value = "Wert"
  : Optionen = "Quelle"
  : suchable = "false"
  : Close-on-Select = "False"
  : erlaubte-tiefe = "false"
  @update: model-value = "updateselected"
  Label = "Name"
  Placeholder = "Wählen Sie eine aus"
  Track-by = "Name"/>

Einzelauswahl mit der Suche

 <Vuemultiselect
  v-model = "Wert"
  : Optionen = "Quelle"
  : Close-on-Select = "True"
  : Clear-on-Select = "False"
  Placeholder = "Wählen Sie eine aus"
  Label = "Name"
  Track-by = "Name"/>

Mehrfach auswählen mit der Suche

 <Vuemultiselect
  v-model = "multivalue"
  : Optionen = "Quelle"
  : multiple = "true"
  : Close-on-Select = "True"
  Platzhalter = "Wählen Sie einige"
  Label = "Name"
  Track-by = "Name"/>

Tagging

mit @tag Event

 <Vuemultiselect
  v-model = "taggingSelected"
  : options = "Taggingoptions"
  : multiple = "true"
  : taggable = "true"
  @Tag = "Addtag"
  Tag-Placeholder = "Fügen Sie dies als neues Tag hinzu".
  placeholder = "Geben Sie zum Durchsuchen oder Hinzufügen von Tags ein"
  Label = "Name"
  Track-by = "Code"/>

 addag (newtag) {
  const tag = {name: newtag, code: newtag.substring (0, 2) + math.floor ((math.random () * 10000000))
  }
  this.taggingoptions.push (Tag)
  this.TaggingSelected.push (Tag)},

Asynchrone Dropdown

 <Vuemultiselect
  v-model = "SelectedCountries"
  : Optionen = "Länder"
  : multiple = "multiple"
  : suchable = "suchable"
  @such-change = "asyncfind"
  Placeholder = "Typ zum Suche"
  Label = "Name"
  Track-by = "Code">
  <Template #noresult>
    Hoppla! Keine Elemente gefunden. Erwägen Sie, die Suchanfrage zu ändern.
  </template>
</Vuemultiselect>

 Methoden: {
  Asyncfind (Abfrage) {this.countries = findService (Abfrage)
  }}

Besonderer Dank

Vielen Dank an Matt Elen für den Beitrag dieser Version!

Ein Vue 3-Upgrade der Vue-Mulitelect-Komponente von @Shentao. Die Idee ist, dass Sie beim Upgrade auf Vue 3 die beiden Komponenten austauschen können und alles einfach funktionieren sollte. Schauen Sie sich unsere Geschichte darüber an, wie wir unser Produkt auf Vue 3 auf unserem Blog unter suade.org aktualisiert haben

Beitragen

 # Verteilungsaufbau mit MinificationNPM Run Bundle# Run Unit TestsNPM Führen Sie Test -Test aus