vue innersearch

InnerSearch : ElasticSearch용 Vue.js 구성 요소

이너서치(InnerSearch)란 무엇입니까?

vue.js 및 Elastic으로 작업하는 개발자를 돕기 위해 만들어진 오픈 소스 프로젝트는 한 시간 내에 검색 UI를 만들 수 있는 가능성을 제공합니다.

InnerSearch는 SearchBox, RefinementListFilter, Paginator 및 Vue.js와 함께 구축되는 기타 여러 UI 구성 요소 모음입니다.

목표는 ElasticSearch 및 Vue.js 전문가가 아니더라도 선언적 구성 요소를 사용하여 아름답고 지정된 검색 인터페이스를 빠르게 만드는 것입니다.

Vue.js의 구성 요소 소품과 슬롯 기능 덕분에 구성 요소를 쉽게 사용자 정의할 수 있습니다.

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 > 

빠른 시작

Checkout innersearch 스타터 앱 스타터 앱

전체 문서 보기

NPM을 통해 설치

$ npm install --save vue-innersearch

<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 빌드를 사용하는 방법을 살펴보세요.

빠른 소개

라이브 데모

특허