vue simple suggest Unduh - vue simple suggest Unduh kode sumber

vue-saran-sederhana

Komponen pelengkapan otomatis yang sederhana namun kaya fitur untuk Vue.js

Memasang

npm install --save vue-simple-suggest

Lihat panduan instalasi untuk opsi lebih lanjut.

Daftar isi

vue-saran-sederhana
- Memasang
- Daftar isi
- Apa itu
  - Fitur
  - Fitur baru?
- Contoh:
  - Contoh sederhana
  - Contoh asinkron
- Instalasi
  - NPM
  - Buka pkg
  - Pengimporan
    - polifill
  - Penggunaan
- Bangun Pengaturan
- Kontrol Bawaan
- API Komponen
  - TLDR
  - Struktur kelas CSS
    - Transisi
  - Definisi API
    - Alat peraga
      - mode
    - Peristiwa yang Dipancarkan
    - Metode Referensi
    - Ref Event Handler
    - Data Referensi
  - slot
    - Masukan khusus
    - Aksesibilitas pada input khusus
    - Item saran khusus
    - Slot item lain-lain khusus
- Kontributor

Apa itu

Ini adalah komponen saran/pelengkapan otomatis yang sederhana namun kaya fitur untuk Vue.js.

Sebenarnya, ini sangat kaya fitur sehingga memungkinkan untuk melakukan hal-hal gila dengannya

Meniru menu drop-down dan drop-down
Ubah daftar saran menjadi tabel saran sebenarnya
Bekerja dengan jenis input khusus APAPUN yang diteruskan (seperti tipe=tombol, radio, dan lain-lain.)
... Dan masih banyak lagi

Dan bonusnya, sangat ringan.

Fitur

dukungan v-model .
Atribut aksesibilitas otomatis (WAI-ARIA selesai)
Mengganti tipe v-model (pilih/input).
Elemen masukan khusus melalui slot default.
Item daftar kustom melalui slot cakupan bernama.
Semua props HTML5 yang valid untuk elemen input default disediakan ( type , tabindex dan lain-lain...).
Kontrol keyboard yang dapat disesuaikan.
API yang kaya dan sederhana.
Kelas CSS untuk penataan ulang yang cepat dan mudah.
Banyak varian build yang bisa dipilih.
Desain komponen yang fleksibel dan dapat disesuaikan.
Polyfill opsional untuk IE yang dapat diimpor dari lib.

Semua props, event dan slot bersifat OPSIONAL untuk komponen ini, sehingga dapat digunakan tanpa konfigurasi apa pun.

Fitur baru?

Jika Anda merasa ada sesuatu yang penting yang hilang (atau menemukan bug) - jangan ragu untuk membuat masalah. :)

Contoh:

Untuk menggunakan komponen cukup instal melalui NPM:

npm install --save vue-simple-suggest

Kemudian, di komponen/halaman Vue.js Anda, lakukan hal berikut...

Contoh sederhana

Jika Anda perlu menyarankan sesuatu dari array statis:

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :filter-by-query =" true " >
<!-- Filter by input text to only show the matching results -->
  </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      simpleSuggestionList ( ) {
        return [
          'Vue.js' ,
          'React.js' ,
          'Angular.js'
        ]
      }
    }
  }
</ script >

Contoh asinkron

Jika Anda berurusan dengan data asinkron dari server (contoh menggunakan https://swapi.co/):

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    display-attribute =" name "
    value-attribute =" url "
    :list =" getSuggestionList "
  > </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      // Function returning a promise as a factory for suggestion lists.
      //
      // vue-simple-suggest calls it automatically when an update to the list is needed,
      // no need for watchers here!
      getSuggestionList ( ) {
        return fetch ( 'https://swapi.co/api/people' , { method : 'GET' } )
          . then ( response => response . json ( ) )
          . then ( json => json . results ) ; /*
          returns a promise with a list of star-wars characters
        */
      }
    }
  }
</ script >

Untuk contoh lebih lanjut (menggunakan pencarian wikipedia) lihat sumber contoh kami.

Instalasi

NPM

npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggest

Buka pkg

Jika disertakan melalui cara ini – komponen akan otomatis terinstall sendiri.

 <!-- UMD Component, async/await polyfills through promises -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest " > </ script >
< script type =" text/javascript " src =" https://unpkg.com/[email protected] " > </ script >
                                                              <!-- Specific version -->

<!-- CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-simple-suggest/dist/styles.css " >

<!-- If you need polyfills, use IIFE verision below -->
<!-- IIFE build includes ALL polyfills: Object.assign, Promises, Generators, Async/Await! -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest/dist/iife.js " > </ script >

Pengimporan

 /// ESNext (original code, no pollyfills, single-file .vue component, css included)
import VueSimpleSuggest from 'vue-simple-suggest/lib'
///

/// ES6 (async polyfills)
import VueSimpleSuggest from 'vue-simple-suggest'
// or, if you have problems importing:
import VueSimpleSuggest from 'vue-simple-suggest/dist/es6'
///

/// ES7 and above (no polyfills)
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
///

/// CommonJS (async, arrow-functions and promises are polyfilled)
const VueSimpleSuggest = require ( 'vue-simple-suggest' )
// or, if you have problems importing:
const VueSimpleSuggest = require ( 'vue-simple-suggest/dist/cjs' )
///

// Optional - import css separately with css loaders:
import 'vue-simple-suggest/dist/styles.css'

polifill

Baru di v1.8.3

vue-simple-suggest hadir dengan polyfill opsional minimal untuk IE11+ - Object.assign , Element.prototype.closest dan Element.prototype.matches . Anda dapat mengimpornya seperti ini:

 import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;

Penggunaan

Secara global:

 // You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )

Dalam komponen .vue file tunggal:

 < script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

  export default {
    components : {
      VueSimpleSuggest
    }
  }
</ script >

Bangun Pengaturan

 # clone the repo
git clone https://github.com/KazanExpress/vue-simple-suggest.git
cd ./vue-simple-suggest

# install dependencies
npm install

# serve example with hot reload at localhost
npm run dev

# build example & readme for static serving
npm run docs

Kontrol Bawaan

Baru di v1.2.0

Ini adalah pintasan keyboard default.

Dapat dikustomisasi dengan prop controls . Semua bidang dalam objek controls ini bersifat opsional.

Skema bawaan:

Kunci (kode kunci)	Keterangan
`Escape` (27)	Jika daftar saran ditampilkan - sembunyikan. Didefinisikan oleh properti `hideList` .
`ArrowDown` (40)	Jika daftar saran disembunyikan - tunjukkan. Didefinisikan oleh properti `showList` .
`ArrowUp` (38) / `ArrowDown` (40)	Siklus (arahkan kursor) melalui saran. Didefinisikan oleh properti `selectionUp` / `selectionDown` dengan hormat.
`Enter` (13)	Jika daftar ditampilkan - pilih elemen yang disorot. Ditentukan oleh properti `select` .
`(Ctrl/Shift) + Space` (32)	Pilih elemen pertama dalam daftar. Ditentukan oleh properti `autocomplete` . Bekerja dengan tombol pengubah `Ctrl` atau tombol pengubah `Shift` .
`(Ctrl/Shift) + Enter` (13)	Sama seperti sebelumnya, tetapi juga menyembunyikan daftar saran.

objek JS:

 {
  selectionUp : [ 38 ] ,
  selectionDown : [ 40 ] ,
  select : [ 13 ] ,
  showList : [ 40 ] ,
  hideList : [ 27 ] ,
  autocomplete : [ 32 , 13 ]
}

API Komponen

TLDR

Klik untuk memperluas

 <!-- Ref to access the API, v-model for efficient query binding -->
< vue-simple-suggest ref =" vueSimpleSuggest " v-model =" model "
  value-attribute =" id "
  display-attribute =" title "
  mode =" input "
  placeholder =" placeholder!!! "
  :list =" getListFunction "
  :max-suggestions =" 10 "
  :min-length =" 3 "
  :debounce =" 100 "
  :destyled =" false "
  :remove-list =" false "
  :filter-by-query =" false "
  :filter =" customFilterFunction "
  :value =" defaultValue "
  :nullable-select =" true "
  :controls =" {
    selectionUp: [38, 33],
    selectionDown: [40, 34],
    select: [13, 36],
    showList: [40],
    hideList: [27, 35],
    autocomplete: [32, 13],
  } "
  @input =" onInputEvent "
  @select =" onSuggestSelect "
  @hover =" onSuggestHover "
  @focus =" onFocus "
  @blur =" onBlur "
  @request-start =" onRequestStart "
  @request-done =" onRequestDone "
  @request-failed =" onRequestFailed "
  @show-list =" onShowList "
  @hide-list =" onHideList "
>
  <!-- v-model on input itself is useless -->
  < input class =" optional-custom-input " >

  <!-- Appears o top of the list -->
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  < div slot =" suggestion-item " slot-scope =" { suggestion } " class =" custom " > {{ suggestion.title }} </ div >

  <!-- Appears below the list -->
  < div class =" misc-item " slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" loading " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

Struktur kelas CSS

Jika ada kebutuhan untuk menyesuaikan tampilan komponen, inilah struktur kelas internalnya:

 // .designed is applied only if `destyled` prop is false.
.vue-simple-suggest.designed.focus // .focus is applied whenever the component is focused.
  .input-wrapper
    .default-input // Replaced with your custom input if default slot is provided.
  .suggestions // Also has transition classes, see below.
    .suggest-item

Jika Anda ingin menggunakan kelas yang sudah ada, atau kerangka kerja seperti Bootstrap, Anda dapat memasukkan kelas Anda sendiri menggunakan prop 'styles' :

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :styles =" autoCompleteStyle "
    :destyled = true
    :filter-by-query =" true " >
  </ vue-simple-suggest >
</ template >

< script >
  ...
  export default {
    ...
    data ( ) {
      return {
        autoCompleteStyle : {
          vueSimpleSuggest : "position-relative" ,
          inputWrapper : "" ,
          defaultInput : "form-control" ,
          suggestions : "position-absolute list-group z-1000" ,
          suggestItem : "list-group-item"
        }
      }
    } ,
    ...
  }
</ script > `

< style lang =" scss " >
.z-1000 {
  z-index: 1000;
}
.hover {
  background-color: #007bff;
  color: #fff;
}
</ style >

Skema:

Milik	Keterangan
`vueSimpleSuggest`	Nama kelas tambahan untuk elemen root komponen.
`inputWrapper`	Nama kelas tambahan untuk elemen `.input-wrapper` .
`defaultInput`	Nama kelas tambahan untuk elemen `input` jika tidak ada komponen masukan khusus yang diberikan.
`suggestions`	Nama kelas tambahan untuk elemen daftar saran `ul` .
`miscItemAbove`	Nama kelas untuk pembungkus slot `misc-item-above` ( elemen `li` itu sendiri).
`suggestItem`	Nama kelas tambahan untuk elemen `li` item saran.
`miscItemBelow`	Nama kelas untuk pembungkus slot `misc-item-below` (elemen `li` itu sendiri).

Transisi

Baru di v1.8.0

Anda juga dapat menentukan transisi daftar khusus dengan menentukan aturan css untuk transisi bernama vue-simple-suggest di div .suggestions :

. suggestions {
  /* It's improtant to have a cpecific pivot point for transition:*/
  opacity : 1 ;
}

. vue-simple-suggest-enter-active . suggestions ,
. vue-simple-suggest-leave-active . suggestions {
  /* Transition length here:*/
  transition : opacity .2 s ;
}

. vue-simple-suggest-enter . suggestions ,
. vue-simple-suggest-leave-to . suggestions {
  /* Transition rule for "disengaged" element:*/
  opacity : 0 ;
}

Definisi API

Alat peraga

Nama	Jenis	Bawaan	Keterangan
`controls` ^v1.2.0	Obyek	Lihat kontrol default	Menentukan pintasan keyboard dalam kode kunci (untuk tujuan kompatibilitas browser). Array menyediakan kemampuan untuk menetapkan beberapa kunci untuk satu tindakan. Terdiri dari 5 bidang array: `selectionUp` , `selectionDown` , `select` , `hideList` dan `autocomplete` , semuanya opsional.
`max-suggestions`	Nomor	`10`	Jumlah maksimum saran untuk ditampilkan. Setel ke 0 untuk saran tak terbatas.
`min-length`	Nomor	`1`	Jumlah minimum simbol yang dimasukkan untuk memicu daftar saran. `vue-simple-suggest` mulai berfungsi sebagai menu tarik-turun, jika nilainya 0.
`display-attribute`	Rangkaian	`'title'`	Properti dalam objek saran untuk ditampilkan dalam daftar. Mendukung jalur putus-putus.
`value-attribute`	Rangkaian	`'id'`	Properti dalam objek saran untuk digunakan sebagai kunci unik. Mendukung jalur putus-putus.
`list`	Fungsi atau Array	`() => []`	Fungsi penyedia array, harus menerima kueri sebagai satu-satunya argumennya. Dapat mengembalikan array atau janji. Bisa asinkron. Komponen berperilaku sebagai masukan sederhana tanpa fungsi ini.
`debounce`	Nomor	`0`	Menentukan `list` debounce (waktu antara kejadian input dan eksekusi fungsi).
`destyled`	Boolean	`false`	Apakah akan membatalkan gaya default daftar masukan dan saran.
`styles` ^v1.8.0	Obyek	`{}`	Kelas CSS untuk dilampirkan dengan gaya komponen saat ini.
`remove-list`	Boolean	`false`	Jika benar - daftar saran akan selalu disembunyikan.
`filter-by-query`	Boolean	`false`	Apakah akan memfilter saran yang dihasilkan berdasarkan kueri teks masukan (jadikan itu komponen pencarian).
`filter`	Fungsi	-	Fungsi khusus untuk memfilter hasil saran yang menerima satu item dan kueri untuk difilter sebagai 2 argumennya. Hanya digunakan jika `filter-by-query` disetel ke `true` .
`mode` ^v1.4.0	Rangkaian	`'input'`	Acara `v-model` . Menentukan peristiwa yang memicu `v-model` . Bisa berupa `'input'` ( `v-model` mengikat properti yang ditampilkan) atau `'select'` ( `v-model` mengikat item yang dipilih).
`type` , `value` , `pattern` , dll...			Semua atribut masukan HTML5 dengan nilai defaultnya.
`nullable-select` ^v1.9.0	Boolean	`false`	Apakah `select` harus menerima `null` atau tidak.
`preventHide` ^v1.11.0	Boolean	`false`	Apakah input tetap terbuka atau tidak, memungkinkan pengguna memilih beberapa input

mode

Baru di v1.4.0

Menentukan peristiwa yang memicu v-model . Dapat berupa salah satu 'input' (default) atau 'select' .

Misalnya, jika 'input' dipilih - maka v-model akan memperbarui nilainya setiap kali peristiwa input diaktifkan, menyetel string input.

Hal yang sama berlaku untuk 'select' - v-model hanya berubah ketika ada sesuatu yang dipilih dari daftar, menyetel nilai yang dipilih (string, objek, atau apa pun) ke argumennya.

Kasus penggunaan yang tepat adalah ketika seseorang ingin menggunakan komponen hanya untuk pengikatan pilihan dan input khusus untuk pengikatan teks:

 < vue-simple-suggest v-model =" selected " mode =" select " >
  < input v-model =" text " >
</ vue-simple-suggest >

Peristiwa yang Dipancarkan

Nama	Argumen	Keterangan
`input`	Acara masukan HTML	Proyeksi keluar dari peristiwa masukan saat ini.
`focus`	Acara fokus HTML	Proyeksi keluar dari peristiwa masukan saat ini.
`blur`	Acara fokus HTML	Proyeksi keluar dari peristiwa masukan saat ini.
`select`	Saran yang dipilih	Diaktifkan pada pilihan saran (melalui klik mouse atau tekan tombol enter).
`hover`	Saran melayang, elemen target	Diaktifkan setiap kali saran baru disorot (melalui gerakan kursor atau panah keyboard).
`suggestion-click`	Saran yang dipilih, acara klik HTML	Diaktifkan pada klik elemen saran.
`show-list`	-	Diaktifkan setiap kali daftar saran diubah untuk ditampilkan.
`hide-list`	-	Diaktifkan setiap kali daftar saran disembunyikan.
`request-start`	Nilai masukan saat ini (kueri)	Diaktifkan setiap kali fungsi `list` mulai dijalankan.
`request-done`	Daftar saran yang dihasilkan	Diaktifkan ketika fungsi `list` berhasil mengembalikan hasil dan meneruskan hasil tersebut sebagai argumen.
`request-failed`	Pengecualian yang mengganggu	Diaktifkan jika pengecualian terjadi selama eksekusi fungsi `list` .

Metode Referensi

diakses melalui $refs.*your ref name here*

Nama	Argumen	Keterangan
`showList`	-	Menampilkan daftar saran. Memancarkan acara yang dihormati.
`hideList`	-	Menyembunyikan daftar saran. Memancarkan acara yang dihormati.
`getSuggestions`	`query` : string	Mendapatkan dan memproses saran dari prop `list` . Mengembalikan janji. Memancarkan kejadian `requestStart` , `requestDone` dan `requestFailed` .
`research`	-	`getSuggestions` yang di-debounce pada nilai input saat ini.
`clearSuggestions`	-	Menghapus susunan `suggestions` .
`select`	saran	Memilih saran yang diteruskan. Memancarkan acara yang dihormati.
`hover`	saran	Arahkan kursor ke saran yang diteruskan. Memancarkan acara yang dihormati.
`displayProperty`	saran	Mengembalikan properti saran yang ditampilkan.
`valueProperty`	saran	Mengembalikan properti nilai dari sebuah saran.
`setText` ^v1.9.0	teks	Menyetel teks khusus ke kolom masukan dengan andal.
`autocompleteText` ^v1.10.0	saran	Melengkapi teks masukan secara otomatis menggunakan saran yang diberikan sebagai satu-satunya argumen.

Ref Event Handler

diakses melalui $refs.*your ref name here*

Anda dapat menggunakannya untuk meniru beberapa perilaku komponen.

Nama	Argumen	Keterangan
`onShowList`		Dipanggil ketika daftar saran perlu ditampilkan.
`showSuggestions`		Menampilkan daftar saran, menyegarkan data jika diperlukan.
`onInput`	Acara masukan HTML	Dipanggil setiap kali teks input diubah. Memancarkan peristiwa `input` .
`onFocus`	Acara fokus HTML	Dipanggil setiap kali masukan menjadi fokus, memancarkan peristiwa `focus` .
`onBlur`	Acara fokus HTML	Antonim dari `onFocus` .
`onAutocomplete`	-	Dipanggil ketika pintasan keyboard pelengkapan otomatis ditekan. Memilih saran pertama.
`onListKeyUp`	Acara keyup HTML	Dipanggil pada keyup komponen. Digunakan secara internal untuk menyembunyikan daftar.
`onKeyDown`	Acara keydown HTML	Dipanggil pada keydown komponen. Digunakan secara internal untuk menampilkan daftar, memperbarui saran, dan mencegah pengiriman formulir.
`moveSelection`		Dipanggil ketika elemen yang dilayangkan perlu diubah.
`suggestionClick`	`suggestion` , acara klik HTML	Dipanggil pada klik saran apa pun. Dapat digunakan untuk meniru klik seperti itu dari luar komponen.

Data Referensi

diakses melalui $refs.*your ref name here*

Nama	Bawaan	Keterangan
`selected`	`null`	Elemen yang dipilih saat ini.
`hovered`	`null`	Elemen yang saat ini melayang.
`suggestions`	`[]`	Daftar saran saat ini.
`textLength`	`0`	Panjang teks yang di input.
`listShown`	`false`	Apakah daftar saran ditampilkan.
`inputElement`	`null`	HTMLInputElement yang saat ini digunakan.
`canSend`	`true`	Apakah getListFuncion yang ditetapkan dapat dijalankan.
`timeoutInstance`	`null`	Batas waktu hingga eksekusi getListFunction berikutnya.
`text`	`$props.value`	Teks masukan saat ini.
`slotIsComponent`	`false`	Apakah masukan khusus saat ini merupakan komponen vue.
`listIsRequest`	-	Apakah prop daftar adalah suatu fungsi.
`input`	-	Referensi ke input saat ini (komponen atau vanilla).
`hoveredIndex`	-	Indeks elemen yang melayang saat ini.
`controlScheme`	Kontrol Bawaan	Skema kontrol saat ini.
`isPlainSuggestion`	`false`	Apakah daftar saran saat ini terdiri dari string biasa (bukan objek).
`isClicking`	`false`	`true` jika pengguna saat ini mengklik.
`isOverList`	`false`	`true` jika pengguna saat ini mengarahkan kursor ke daftar saran.
`isInFocus`	`false`	`true` jika komponen sedang dalam fokus.
`isTabbed`	`false`	`true` jika pengguna menekan tab, saat komponen dalam fokus.
`isSelectedUpToDate`	`false`	`true` jika pengguna belum melakukan input apa pun sejak pilihan terakhir, sehingga pilihan tersebut masih relevan.

slot

Masukan khusus

slot default (opsional)

Mendukung bersarang. Props masukan dapat diteruskan ke masukan khusus untuk menghindari pemrosesannya dengan vue-simple-suggest. Defaultnya adalah input sederhana dengan props yang diteruskan ke vue-simple-suggest.

Peringatan: v-model pada input khusus TIDAK sama dengan v-model pada vue-simple-suggest!

 <!--  Default HTMLInputElement example:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " pattern =" [a-z]+ "/>

 <!--  Vanilla HTMLInputElement example 1:  -->
< vue-simple-suggest >
  < input pattern =" [a-z]+ " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 2:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 3 (fully equivalent to the second example):  -->
< vue-simple-suggest v-model =" model " >
  < input placeholder =" Text here " type =" search " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 4 (nested):  -->
< vue-simple-suggest v-model =" model " >
  < div >
    < section >
      < input type =" email " >
    </ section >
  </ div >
</ vue-simple-suggest >

 <!--  Vue component example (also supports nesting):  -->
< vue-simple-suggest v-model =" vModelGoesHere " >
  < my-custom-input-somponent :value =" initialInputValueGoesHere " > </ my-custom-input-somponent >
</ vue-simple-suggest >

Peringatan komponen masukan khusus:

Untuk bekerja dengan vue-simple-suggest komponen masukan khusus Anda harus mengikuti perilaku standar tertentu.

Komponen masukan khusus harus (agar berfungsi dengan baik):

Memancarkan peristiwa input .
Memancarkan focus dan blur peristiwa.
Miliki penyangga value .

Komponen masukan khusus harus (untuk menghindari batasan penggunaan):

Tidak menghentikan propagasi acara apa pun dari elemen HTML masukan internal.
Meneruskan argumen peristiwa orisinal dengan focus dan blur peristiwa.

Jika vue-simple-suggest dengan komponen khusus Anda tampaknya tidak bereaksi terhadap perubahan variabel luar - ikat v-model kedua komponen ke variabel yang sama, seperti:

 < vue-simple-suggest v-model =" model " >
  < my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest >

Aksesibilitas pada input khusus

Baru di v1.9.0

vue-simple-suggest secara otomatis memasukkan 3 atribut ARIA yang diperlukan untuk elemen <input> default dan input khusus apa pun, selama komponen input khusus Anda berisi elemen <input> html.

Atribut ini memastikan pelengkapan otomatis dapat digunakan oleh pengguna yang mengandalkan Pembaca Layar.

Nama	Nilai	Keterangan
aria-pelengkapan otomatis	`"list"`	Menunjukkan bahwa perilaku pelengkapan otomatis input teks adalah menyarankan daftar kemungkinan nilai dalam popup.
kontrol aria	IDREF daftar `suggestions`	IDREF elemen popup yang mencantumkan nilai yang disarankan.
keturunan aria-aktif	IDREF dari opsi melayang	Memungkinkan teknologi bantu mengetahui elemen mana yang dianggap fokus oleh aplikasi sementara fokus DOM tetap pada elemen masukan.

Item saran khusus

slot suggestion-item (opsional)

Keterangan

Mengizinkan definisi html khusus dari item saran dalam daftar. Defaultnya adalah <span>{{ displayAttribute(suggestion) }}</span>

Menerima objek suggestion dan teks query sebagai nilai atribut slot-scope .

 <!-- Example (book suggestions): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < div > {{ suggestion.title }} by {{ suggestion.author }} </ div >
  </ div >
</ vue-simple-suggest >

Tombol khusus di dalam item saran

Jika Anda ingin menambahkan beberapa tombol tindakan ke item saran, cukup gunakan pengubah direktif .stop untuk mencegah suggestion-click default:

 <!-- Example (editable book suggestion): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" remove(suggestion) " > remove from list </ button >
    < button @click.stop =" like(suggestion) " > add to favorites </ button >
  </ div >
</ vue-simple-suggest >

Dalam hal ini, tombol HANYA akan menjalankan metode terikat dan tidak akan memilih item yang disarankan.

Pelengkapan otomatis manual

Jika ada kebutuhan untuk melengkapi saran secara otomatis dalam masukan alih-alih memilihnya (seperti dalam saran seluler penelusuran Google), Anda dapat menggunakan fungsi autocomplete() dalam cakupan slot:

 <!-- Example: -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, autocomplete } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" autocomplete() " > Complete input </ button >
  </ div >
</ vue-simple-suggest >

atau dalam metode referensi:

 < template >
  < vue-simple-suggest ref =" suggest " >
    < div slot =" suggestion-item " slot-scope =" { suggestion } " >
      < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
      < button @click.stop =" onAutocompleteButtonClick(suggestion) " > Complete input </ button >
    </ div >
  </ vue-simple-suggest >
</ template >

< script >
export default {
  //...
  methods : {
    onAutocompleteButtonClick ( suggestion ) {
      this . $refs . suggest . autocompleteText ( suggestion ) ;
    }
  }
  //...
}
</ script >

Data Referensi

Bekerja sama dengan bidang referensi, slot ini dapat digunakan untuk mengubah perilaku daftar saran secara drastis.

Salah satu contoh paling sederhana adalah menyorot teks kueri di hasil:

 < div slot =" suggestion-item " slot-scope =" scope " >
  < span v-html =" boldenSuggestion(scope) " > </ span >
</ div >

 boldenSuggestion ( scope ) {
  if ( ! scope ) return scope ;

  const { suggestion , query } = scope ;

  let result = this . $refs . suggestComponent . displayProperty ( suggestion ) ;

  if ( ! query ) return result ;

  const texts = query . split ( / [s-_/\|.] / gm ) . filter ( t => ! ! t ) || [ '' ] ;
  return result . replace ( new RegExp ( '(.*?)(' + texts . join ( '|' ) + ')(.*?)' , 'gi' ) , '$1<b>$2</b>$3' ) ;
}

Hasil melalui API pencarian Google Buku:

Slot item lain-lain khusus

slot misc-item-above dan misc-item-below (opsional)

Izinkan elemen khusus ditampilkan dalam daftar saran. Elemen-elemen ini tidak pernah hilang dari daftar, juga tidak dapat dipilih atau diarahkan.

Mereka dapat digunakan untuk dekorasi, pemuat, pesan kesalahan, dan lain-lain.

Slot ini tidak memiliki default, sehingga tidak ditampilkan hingga ditentukan.

Terima array suggestions dan teks query sebagai nilai atribut slot-scope .

 <!-- Examples: -->
< vue-simple-suggest >
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
  </ template >

  < div slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" isLoading " class =" misc-item " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

Slot ini juga dapat digunakan untuk menangani hasil yang kosong, seperti ini:

 <!-- Main slot template -->
< template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
  < div class =" misc-item " >
    < span > You're searching for '{{ query }}'. </ span >
  </ div >

  <!-- Sub-template if have any suggestions -->
  < template v-if =" suggestions.length > 0 " >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  <!-- Show "No result" otherwise, if not loading new ones -->
  < div class =" misc-item " v-else-if =" !loading " >
    < span > No results </ span >
  </ div >
</ template >

Kontributor

Terima kasih kepada orang-orang hebat ini (kunci emoji):

_Alexei ?	_Karen ?	_{Simeon Kerkol} ?	_{Roberson Costa} ?	_{Rosdi Kasim}	_{antoinematyja} ?	_{Matias Martin} ?
_{Rob Otak} ? ?	_{Tuan Wook} ?	_nattam ?	_Petrus ?	_RMFogarty	_{Brian Monsales}	_Mila76 ?
_{Andriy Lofberg} ?	_{Bruno Monteiro} ?	_{hannesaasamets} ?	_Jimmy ?	_{Akankah Plaehn} ?	_lauri911 ?	_{Alex Hyriavets} ?
_{Behnood Khani} ?	_{Hay Kranen}	_shrpne ? ?	_{Peta Dragos-Andrei} ?	_sialan	_yamagen0915 ?

Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun dipersilakan!

Memperluas