تنزيل vue innersearch - تنزيل كود مصدر vue innersearch

vue innersearch

شفرة المصدر الأخرى

v0.0.12

تنزيل

InnerSearch: مكونات Vue.js لـ ElasticSearch

ما هو البحث الداخلي؟

مشروع مفتوح المصدر تم إنشاؤه لمساعدة المطورين الذين يعملون مع vue.js وElastic، ومنحهم إمكانية إنشاء واجهات مستخدم للبحث خلال ساعة.

InnerSearch عبارة عن مجموعة من مكونات واجهة المستخدم مثل SearchBox وRefinementListFilter وPaginator والعديد من المكونات الأخرى التي تم إنشاؤها باستخدام Vue.js.

الهدف هو إنشاء واجهات بحث محددة وجميلة بسرعة باستخدام مكونات تعريفية دون أن تكون خبيرًا في ElasticSearch وVue.js.

بفضل دعائم المكونات وميزات الفتحات من Vue.js، يمكن تخصيص المكونات بسهولة

مثال لواجهة المستخدم مع InnerSearch:

الكود المقابل:

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

بداية سريعة

الخروج من تطبيق بداية البحث الداخلي

انظر الوثائق الكاملة

التثبيت عبر 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 >