vue select

selección de vue

Todo lo que desea que pueda hacer el elemento HTML <select> , envuelto en un componente Vue ligero, extensible y sin dependencia.

Vue Select es un componente de selección/desplegable/escritura anticipada rico en funciones. Proporciona una plantilla predeterminada que se adapta a la mayoría de los casos de uso para un menú desplegable de selección filtrable. El componente está diseñado para ser lo más liviano posible y, al mismo tiempo, mantener altos estándares de accesibilidad, experiencia del desarrollador y personalización.

• Etiquetado
• Filtrar / Buscar
• Soporte Vuex
• Soporte AJAX
• Soporte de RSS
• Accesible
• ~20kb en total / ~5kb CSS / ~15kb JS
• Seleccione opciones únicas/múltiples
• Personalizable con ranuras y variables SCSS
• Cero dependencias

Documentación

Documentación completa y ejemplos disponibles en https://vue-select.org.

• Documentación API
• Plantilla CodePen de Vue 2
• Plantilla CodePen de Vue 3

¿Patrocinadores?

Se necesita mucho esfuerzo para mantener este proyecto. Si le ha ahorrado tiempo de desarrollo, ¡considere patrocinar el proyecto con patrocinadores de GitHub!

¡Muchísimas gracias a los patrocinadores y contribuyentes que hacen posible Vue Select!

empezar

Vue 3 / Vue Seleccione 4.x-beta

La compatibilidad con Vue 3 está en el canal beta : vue-select@beta y se convertirá en el nuevo valor predeterminado cuando se lance v4 . ¡Vea el n.° 1579 para obtener más detalles!

Instalar:

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

Luego, importe y registre el 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" ) ;

El componente en sí no incluye ningún CSS. Deberá incluirlo por separado en su Component.vue:

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

Vue 2/Vue Seleccionar 3.x

Instalar:

yarn add vue-select

# or use npm

npm install vue-select

Luego, importe y registre el componente:

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

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

El componente en sí no incluye ningún CSS. Deberá incluirlo por separado:

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

También puedes incluir vue-select directamente en el navegador. Consulte la documentación para cargar desde CDN.

Licencia

MIT