vue cool select

La versión actual es 3.x , si está buscando 2.x , puede encontrarla aquí (consulte también los cambios importantes).

Selección flexible

Demostración + Documentación

Características

• sin dependencias

• Los accesorios (30) le permiten personalizar un componente de varias maneras.

• las ranuras (13) permiten cambiar el contenido en cualquier lugar

• eventos (8) te informarán de todo

• autocompletar (puede usar la búsqueda personalizada, también puede desactivar la entrada de búsqueda)

• controles de teclado (no solo a través de las flechas)

• soporte en dispositivos móviles

• validación, estado de error y éxito

• deshabilitado y solo lectura

• tamaños pequeños y grandes (como en bootstrap)

• la capacidad de configurar sus estilos, puede escribir temas desde cero. 2 temas: Bootstrap 4 (estilos iguales), Material Design

• Compatibilidad con mecanografiado

• navegación por pestañas

• SSR (renderizado del lado del servidor)

• determinar automáticamente la posición adecuada para el menú si va más allá de la ventana gráfica

Escriba sus sugerencias, encantado de agregarlas.

Instalación

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

empezar

MNP

1. Importe este complemento, css (tema) y agregue el complemento a través de 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. Usar dentro de otro 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. Agregar a <template> :

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

Navegador (CDN)

Incluya vue-cool-select en la 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 " >

Si se detecta Vue en la página, el complemento se instala automáticamente.

---

Documentación y ejemplos aquí.

HACER

• selección múltiple
• Cobertura de pruebas del 100%

Estaré feliz de agregar algo o mejorar, puedes escribir lo que quieras ver. También tengo más motivación para trabajar si das una estrella, ¡gracias! ?