vue innersearch

InnerSearch ：用於 ElasticSearch 的 Vue.js 元件

什麼是內部搜尋？

一個開源項目，旨在幫助開發人員使用 vue.js 和 Elastic，使他們能夠在一小時內創建搜尋 UI。

InnerSearch 是一套 UI 元件，例如 SearchBox、RefinementListFilter、Paginator 以及許多其他使用 Vue.js 建構的元件。

目的是使用宣告元件快速建立漂亮的指定搜尋介面，而無需成為 ElasticSearch 和 Vue.js 專家。

也感謝 Vue.js 的組件 props 和 slot 功能，組件可以輕鬆自訂

使用 InnerSearch 的 UI 範例：

對應代碼：

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

快速入門

查看innersearch 入門應用程式 入門應用程式

查看完整文檔

透過 NPM 安裝

$ npm install --save vue-innersearch

使用 as <script>標籤

vue-innersearch 需要 Vue 和 Vuex 才能運作

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

看看如何在我們的 Jsbin 範例中使用獨立的 UMD 構建

快速介紹

現場演示

執照