vue multiselect

vue-multipl elección

Documentación para la versión 3

La documentación para v3.0.0 es casi la misma que para v2.x, ya que es principalmente compatible con retroceso. Para ver los documentos completos para V3 y versiones anteriores, consulte: Vue-Multiselect.js.org

Características y características:

• Sin dependencias

• Seleccione único

• Seleccionar múltiples

• Etiquetado

• Desplegable

• Filtración

• Buscar con sugerencias

• Lógica dividida en mixins

• Componente básico y soporte para componentes personalizados

• Soporte de V-Modelo

• Soporte vuex

• Soporte de opciones de async

• Totalmente configurable (consulte la lista de accesorios a continuación)

Instalación y uso básico

 NPM Instalar vue-multiselect@Next

 <template>
  <div>
    <VuemultIselect v-model = "seleccionado": opciones = "opciones">
    </vuemultIselect>
  </div>
</template> <script> importe vuemultIselect desde 'vue-multisElect'Export predeterminado {componentes: {vuemultIselect}, data () {return {selected: null, options: [' list ',' of ',' options ']} }} </script> <estilo src = "vue-multiselect/dist/vue-multiselect.css"> </ystye>

Jsfiddle

Ejemplo JSFIDDLE: use esto para la reproducción de problemas.

Ejemplos

Seleccione / desplegable único

 <VuemultIselect
  : modelo-value = "valor"
  : opciones = "fuente"
  : Searchable = "False"
  : cerrador-on-select = "falso"
  : permitido-tempy = "falso"
  @Update: Model-Value = "UpdateSelected"
  etiqueta = "nombre"
  Posición de posicionador = "Seleccionar uno"
  Track-by = "Name"/>

Seleccione único con búsqueda

 <VuemultIselect
  V-Model = "Valor"
  : opciones = "fuente"
  : cerrador-on-select = "verdadero"
  : claro-on-select = "falso"
  Posición de posicionador = "Seleccionar uno"
  etiqueta = "nombre"
  Track-by = "Name"/>

Seleccionar múltiples con búsqueda

 <VuemultIselect
  V-Model = "Multivalue"
  : opciones = "fuente"
  : múltiple = "verdadero"
  : cerrador-on-select = "verdadero"
  Posición de posición = "Elige algunos"
  etiqueta = "nombre"
  Track-by = "Name"/>

Etiquetado

con el evento @tag

 <VuemultIselect
  V-Model = "Taggingselected"
  : options = "taggingOptions"
  : múltiple = "verdadero"
  : taggable = "verdadero"
  @tag = "addtag"
  tag-placeholder = "Agregar esto como una nueva etiqueta"
  PLACELATHER = "Tipo para buscar o agregar etiqueta"
  etiqueta = "nombre"
  Track-by = "Code"/>

 addtag ​​(newtag) {
  const etiqueta = {nombre: newtag, código: newtag.substring (0, 2) + math.floor ((math.random () * 10000000))
  }
  this.taggingOptions.push (etiqueta)
  this.gaggingselected.push (etiqueta)},

Desplegable asincrónico

 <VuemultIselect
  V-Model = "SelectedCountries"
  : opciones = "países"
  : múltiple = "múltiple"
  : Searchable = "Searchable"
  @search-change = "asyncfind"
  Posición de posicionador = "Tipo para buscar"
  etiqueta = "nombre"
  Track-by = "Code">
  <Plantilla #noresult>
    ¡Ups! No se encontraron elementos. Considere cambiar la consulta de búsqueda.
  </template>
</vuemultIselect>

 Métodos: {
  AsyncFind (Query) {this.countries = findService (consulta)
  }}

Agradecimiento especial

¡Gracias a Matt Elen por contribuir con esta versión!

Una actualización VUE 3 del componente Vue-MulitsElect de @shentao. La idea es que cuando se actualiza a Vue 3, puede intercambiar los dos componentes, y todo debería funcionar simplemente. No dude en ver nuestra historia de cómo actualizamos nuestro producto a Vue 3 en nuestro blog en suade.org

Que contribuye

 # Construcción de distribución con MinificationNPM Ejecutar el paquete# Ejecutar unidades unitarias testSnpm test test