vue cool select

La version actuelle est 3.x , si vous recherchez 2.x , vous pouvez la trouver ici (voir également les dernières modifications).

Sélection flexible

Démo + Documentation

Caractéristiques

• pas de dépendances

• les accessoires (30) vous permettent de personnaliser un composant de différentes manières

• des emplacements (13) permettent de modifier le contenu n'importe où

• les événements (8) vous diront tout

• saisie semi-automatique (vous pouvez utiliser la recherche personnalisée, vous pouvez également désactiver la saisie de recherche)

• commandes du clavier (pas seulement via les flèches)

• assistance sur les appareils mobiles

• validation, état d'erreur et succès

• désactivé et en lecture seule

• petites et grandes tailles (comme en bootstrap)

• la possibilité de définir vos styles, vous pouvez écrire un thème à partir de zéro. 2 thèmes : Bootstrap 4 (styles égaux), Material Design

• Prise en charge de TypeScript

• navigation par onglets

• SSR (rendu côté serveur)

• déterminer automatiquement la position appropriée pour le menu s'il dépasse la fenêtre d'affichage

Écrivez vos suggestions, heureux de les ajouter.

Installation

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

Commencer

MNP

1. Importez ce plugin, css (thème) et ajoutez le 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. Utiliser dans un autre composant :

 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. Ajouter au <template> :

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

Navigateur (CDN)

Incluez vue-cool-select dans la page.

 < 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 " >

Si Vue est détectée dans la Page, le plugin est installé automatiquement.

---

Documentation et exemples ici.

FAIRE

• sélection multiple
• Couverture des tests à 100 %

Je suis heureux d'ajouter quelque chose ou d'améliorer, vous pouvez écrire ce que vous voulez voir. J'ai aussi plus de motivation pour travailler si vous donnez une étoile, merci ! ?