vue cool select

A versão atual é 3.x , se você estiver procurando por 2.x , poderá encontrá-la aqui (veja também as alterações mais recentes).

Seleção flexível

Demonstração + Documentação

Características

• sem dependências

• props (30) permitem que você personalize um componente de várias maneiras

• slots (13) permitem que o conteúdo seja alterado em qualquer lugar

• eventos (8) informarão você sobre tudo

• preenchimento automático (você pode usar a pesquisa personalizada, também pode desativar a entrada de pesquisa)

• controles do teclado (não apenas através das setas)

• suporte em dispositivos móveis

• validação, estado de erro e sucesso

• desabilitado e somente leitura

• tamanhos pequenos e grandes (como no bootstrap)

• a capacidade de definir seus estilos, você pode escrever o tema do zero. 2 temas: Bootstrap 4 (estilos iguais), Material Design

• Suporte TypeScript

• navegação por aba

• SSR (renderização do lado do servidor)

• determinar automaticamente a posição adequada para o menu se ele ultrapassar a janela de visualização

Escreva suas sugestões, fico feliz em adicionar.

Instalação

yarn add vue-cool-select ou npm install --save vue-cool-select

Comece

NPM

1. Importe este plugin, css (tema) e adicione plugin via Vue.use :

 import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue . use ( CoolSelectPlugin )

2. Use dentro de outro componente:

 import { CoolSelect } from 'vue-cool-select'

export default {
  components : { CoolSelect } ,
  data ( ) {
    return {
      // simple example of items
      items : [ 'Item 1' , 'Item 2' , 'Item 3' ] ,
      // there will be a selected item
      selected : null
    }
  }
}

3. Adicione ao <template> :

< cool-select
  v-model = " selected "
  : items = " items "
/>

Navegador (CDN)

Inclua vue-cool-select na página.

 < script src =" https://unpkg.com/vue-cool-select " > </ script >

<!-- paste the line below only if you need "bootstrap" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css " >
<!-- paste the line below only if you need "material-design" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/material-design.css " >

Se o Vue for detectado na página, o plugin será instalado automaticamente.

---

Documentação e exemplos aqui.

PENDÊNCIA

• seleção múltipla
• 100% de cobertura de testes

Fico feliz em acrescentar algo ou melhorar, você pode escrever o que deseja ver. Também tenho mais motivação para trabalhar se você der uma estrela, obrigado! ?