vue select

vue-selecionar

Tudo o que você deseja que o elemento HTML <select> possa fazer, agrupado em um componente Vue leve, sem dependência e extensível.

Vue Select é um componente de seleção/suspensão/digitação antecipada rico em recursos. Ele fornece um modelo padrão que se adapta à maioria dos casos de uso para um menu suspenso de seleção filtrável. O componente foi projetado para ser o mais leve possível, mantendo altos padrões de acessibilidade, experiência do desenvolvedor e personalização.

• Marcação
• Filtrando/Pesquisando
• Suporte Vuex
• Suporte AJAX
• Suporte SSR
• Acessível
• ~20kb Total / ~5kb CSS / ~15kb JS
• Selecione opções únicas/múltiplas
• Personalizável com slots e variáveis ​​SCSS
• Dependências zero

Documentação

Documentação completa e exemplos disponíveis em https://vue-select.org.

• Documentação da API
• Modelo CodePen Vue 2
• Modelo CodePen Vue 3

Patrocinadores?

É preciso muito esforço para manter este projeto. Se isso economizou tempo de desenvolvimento, considere patrocinar o projeto com patrocinadores do GitHub!

Muito obrigado aos patrocinadores e colaboradores que tornam o Vue Select possível!

Comece

Vue 3 / Vue Select 4.x-beta

O suporte ao Vue 3 está no canal beta : vue-select@beta e se tornará o novo padrão quando v4 for lançada. Veja #1579 para mais detalhes!

Instalar:

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

Em seguida, importe e registre o componente:

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

O componente em si não inclui nenhum CSS. Você precisará incluí-lo separadamente em seu Component.vue:

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

Vue 2 / Vue Selecione 3.x

Instalar:

yarn add vue-select

# or use npm

npm install vue-select

Em seguida, importe e registre o componente:

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

O componente em si não inclui nenhum CSS. Você precisará incluí-lo separadamente:

 import "vue-select/dist/vue-select.css" ;

Você também pode incluir vue-select diretamente no navegador. Confira a documentação para carregar do CDN.

Licença

MIT