vue multiselect

vue-multislect

Documentação para a versão 3

A documentação para v3.0.0 é quase a mesma do V2.x, pois é principalmente compatível com versões anteriores. Para os documentos completos para versões V3 e anteriores, confira: vue-multisElect.js.org

Recursos e características:

• Sem dependências

• Selecionar único

• Seleção múltipla

• Marcação

• Suspensos

• Filtragem

• Pesquise com sugestões

• Lógica dividida em mixins

• Componente básico e suporte para componentes personalizados

• Suporte V-Modelo em V.

• Suporte Vuex

• Suporte de opções assíncronas

• Totalmente configurável (consulte a lista de adereços abaixo)

Instale e uso básico

 NPM Instale Vue-MultisElect@Next

 <Sodemplate>
  <div>
    <VuemultisElect v-model = "Selected": Options = "Opções">
    </vuemultisElect>
  </div>
</modemplate> <cript> Importar VuemultisElect a partir de 'vue-multisElect'export padrão {componentes: {vuemultisElect}, data () {return {Selected: null, opções: [' lista ',' de ',' opções ']} }} </script> <estilo src = "vue-multisElect/dist/vue-MultisElect.css"> </style>

Jsfiddle

Exemplo JSFiddle - Use isso para reprodução de problemas.

Exemplos

Selecionar / suspenso único

 <VuemultisElect
  : Model-value = "Valor"
  : options = "fonte"
  : searchable = "false"
  : close-on-select = "false"
  : allow-oppty = "false"
  @Update: Model-value = "UpdateSelected"
  Label = "Nome"
  espaço reservado = "Selecione um"
  track-by = "nome"/>

Selecionar único com pesquisa

 <VuemultisElect
  V-Model = "Valor"
  : options = "fonte"
  : close-on-select = "true"
  : Clear-on-Select = "false"
  espaço reservado = "Selecione um"
  Label = "Nome"
  track-by = "nome"/>

Selecionar múltiplo com pesquisa

 <VuemultisElect
  V-Model = "Multivalue"
  : options = "fonte"
  : múltiplo = "true"
  : close-on-select = "true"
  espaço reservado = "Escolha alguns"
  Label = "Nome"
  track-by = "nome"/>

Marcação

com evento @tag

 <VuemultisElect
  V-Model = "Taggingslected"
  : options = "TaggingOptions"
  : múltiplo = "true"
  : taggable = "true"
  @tag = "AddTag"
  tag-placeholder = "Adicione isso como nova tag"
  espaço reservado = "Digite para pesquisar ou adicionar tag"
  Label = "Nome"
  track-by = "Code"/>

 addTag (newtag) {
  const tag = {nome: newtag, código: newtag.substring (0, 2) + math.floor ((math.random () * 10000000))
  }
  this.TaggingOptions.push (tag)
  this.TaggingsElectected.push (tag)},

Suspenso assíncrono

 <VuemultisElect
  V-Model = "SelectedCountries"
  : options = "países"
  : múltiplo = "múltiplo"
  : Searchable = "pesquisável"
  @Search-change = "Asyncfind"
  espaço reservado = "Digite para pesquisar"
  Label = "Nome"
  track-by = "código">
  <modelo #noresult>
    Opa! Nenhum elemento encontrado. Considere alterar a consulta de pesquisa.
  </modelo>
</vuemultisElect>

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

Obrigado especial

Obrigado a Matt Elen por contribuir com esta versão!

Uma atualização do Vue 3 do componente Vue-Mulitselect de @shentao. A idéia é que, quando você atualiza para o Vue 3, pode trocar os dois componentes e tudo deve simplesmente funcionar. Sinta -se à vontade para conferir nossa história de como atualizamos nosso produto para o Vue 3 em nosso blog em suade.org

Contribuindo

 # Building de distribuição com MinificationNpm Run Bundle# Run Testsnpm Teste de execução