vue multiselect

Vue-multiselect

Documentation pour la version 3

La documentation de la v3.0.0 est presque la même que pour v2.x car elle est principalement compatible. Pour les documents complets pour la V3 et les versions précédentes, consultez: Vue-Multiselect.js.org

Caractéristiques et caractéristiques:

• Aucune dépendance

• Select unique

• Plusieurs sélections

• Marquage

• Listes déroulantes

• Filtration

• Recherche avec des suggestions

• Logique divisée en mixins

• Composant de base et prise en charge des composants personnalisés

• Support de modèle en V

• Support Vuex

• Prise en charge des options asynchrones

• Entièrement configurable (voir la liste des accessoires ci-dessous)

Installation et utilisation de base

 NPM Installer Vue-Multiselect @ Suivant

 <mpelate>
  <div>
    <vueMultiSelect V-model = "Selected": Options = "Options">
    </vuemultiselect>
  </div>
</ template> <cript> Importer VueMultelelect à partir de 'Vue-Multiselect'Export default {Components: {VueMultiSelect}, Data () {return {Selected: Null, Options: [' List ',' of ',' Options ']} }} </ script> <style src = "vue-multiselect / dist / vue-multiselect.css"> </ style>

Jsfiddle

Exemple JSFiddle - Utilisez-le pour la reproduction des problèmes.

Exemples

SELECT SELECT / DRISTDOWN

 <Vuemultiselect
  : modèle-valeur = "valeur"
  : Options = "Source"
  : Rearchable = "false"
  : close-on-select = "false"
  : perte-empty = "false"
  @update: modèle-valeur = "UpdateSelected"
  label = "name"
  placeholder = "sélectionner un"
  piste-by = "name" />

Select unique avec la recherche

 <Vuemultiselect
  V-model = "valeur"
  : Options = "Source"
  : close-on-select = "true"
  : clear-on-Select = "false"
  placeholder = "sélectionner un"
  label = "name"
  piste-by = "name" />

Sélectionner plusieurs avec la recherche

 <Vuemultiselect
  V-model = "Multivale"
  : Options = "Source"
  : multiple = "true"
  : close-on-select = "true"
  Planholder = "Choisissez certains"
  label = "name"
  piste-by = "name" />

Marquage

Avec l'événement @tag

 <Vuemultiselect
  V-model = "TaggingSelected"
  : Options = "TaggingOptions"
  : multiple = "true"
  : taggable = "true"
  @ tag = "addtag"
  tag-placeholder = "ajouter ceci en tant que nouveau tag"
  placeholder = "type pour rechercher ou ajouter une balise"
  label = "name"
  piste-by = "code" />

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

Dropdown asynchrone

 <Vuemultiselect
  V-model = "SelectedCountries"
  : Options = "Pays"
  : multiple = "multiple"
  : Rearchable = "Recherche"
  @ search-change = "asyncfind"
  placeholder = "type à rechercher"
  label = "name"
  piste-by = "code">
  <template #NoResult>
    Oups! Aucun éléments trouvés. Envisagez de modifier la requête de recherche.
  </ template>
</vuemultiselect>

 Méthodes: {
  asyncFind (query) {this.Countries = FindService (Query)
  }}

Merci spécial

Merci à Matt Elen d'avoir contribué cette version!

Une mise à niveau Vue 3 du composant Vue-Mulitselect de @ Shentao. L'idée est que lorsque vous passez à Vue 3, vous pouvez échanger les deux composants, et tout devrait simplement fonctionner. N'hésitez pas à consulter notre histoire sur la façon dont nous avons mis à niveau notre produit à Vue 3 sur notre blog sur suade.org

Contributif

 # Build de distribution avec minification