vue innersearch

InnerSearch : Komponen Vue.js untuk ElasticSearch

Apa itu InnerSearch?

Sebuah proyek Sumber Terbuka yang dibuat untuk membantu pengembang yang bekerja dengan vue.js dan Elastic, memberi mereka kemungkinan untuk membuat UI pencarian dalam waktu satu jam.

InnerSearch adalah rangkaian komponen UI seperti SearchBox, RefinementListFilter, Paginator, dan banyak lainnya yang dibuat dengan Vue.js.

Tujuannya adalah untuk dengan cepat membuat antarmuka pencarian tertentu yang indah menggunakan komponen deklaratif tanpa menjadi ahli ElasticSearch dan Vue.js.

Terima kasih juga alat peraga komponen dan fitur slot dari Vue.js, komponennya mudah disesuaikan

Contoh UI yang dilengkapi dengan InnerSearch :

Kode yang sesuai:

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

Mulai Cepat

Periksa aplikasi starter aplikasi innersearch starter

Lihat Dokumentasi lengkap

Menginstal melalui NPM

$ npm install --save vue-innersearch

Menggunakan sebagai tag <script>

vue-innersearch membutuhkan Vue dan Vuex agar dapat berfungsi

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

Lihat cara menggunakan build UMD mandiri dalam contoh Jsbin kami

Pengenalan Cepat

Demo langsung

Lisensi