vue innersearch
v0.0.12
Un proyecto de código abierto creado para ayudar a los desarrolladores que trabajan con vue.js y Elastic a brindarles la posibilidad de crear UI de búsqueda en una hora.
InnerSearch es un conjunto de componentes de interfaz de usuario como SearchBox, RefinementListFilter, Paginator y muchos otros que se crearán con Vue.js.
El objetivo es crear rápidamente hermosas interfaces de búsqueda específicas utilizando componentes declarativos sin ser un experto en ElasticSearch y Vue.js.
Gracias también a los accesorios de los componentes y las funciones de las ranuras de Vue.js, los componentes se pueden personalizar fácilmente.
Un ejemplo de interfaz de usuario construido con InnerSearch:
Código correspondiente:
< div class =" columns " >
< div class =" column is-one-fifth " >
< div >
< refinement-list-filter :field =" 'state' " > </ refinement-list-filter >
< refinement-list-filter :field =" 'gender' " > </ refinement-list-filter >
</ div >
</ div >
< div class =" column " >
< div >
< searchbox :field =" 'firstname' " > </ searchbox >
< div style =" margin: 20px auto;width: 90% " >
< search-button > </ search-button >
< reset-button > </ reset-button >
</ div >
< hits > </ hits >
< paginate :previousText =" 'Previous page' " :nextText =" 'Next page' " :size =" 10 " > </ paginate >
</ div >
</ div >
</ div > Pagar aplicación de inicio de búsqueda interna aplicación de inicio
Ver documentación completa
$ npm install --save vue-innersearch<script>vue-innersearch necesita Vue y Vuex para funcionar
< script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/vue-innersearch.min.js " > </ script >Eche un vistazo a cómo utilizar la compilación UMD independiente en nuestro ejemplo de Jsbin.
Demostración en vivo
