vue search input

vue-pencarian-input

Komponen masukan pencarian Vue.js 3, terinspirasi oleh masukan pencarian global dari Storybook dan GitHub.

Komponen SearchInput menampilkan input pencarian dengan beberapa fitur tambahan bawaan.

Fitur:

• Fokus pada input pencarian kapan saja dengan menekan tombol / pada keyboard.
• Termasuk gaya CSS default tetapi juga mudah untuk menghadirkan gaya Anda sendiri.
• Ikon yang sepenuhnya dapat disesuaikan melalui slots
• Menampilkan ikon x di sisi kanan input pencarian, digunakan untuk menghapus teks ketika ada nilai yang diketik di dalamnya.
• Teks pencarian dihapus dengan menekan tombol esc ketika input pencarian memiliki fokus (dapat dikonfigurasi).

Penting: Disarankan agar Anda menyertakan komponen SearchInput hanya sekali pada setiap halaman.
Jika ada beberapa komponen SearchInput , komponen pertama yang ditampilkan akan diprioritaskan saat tombol / ditekan.

Demo dengan contoh

https://vue-search-input.vercel.app

Instalasi

npm i vue-search-input

Penggunaan

 < template >
  < SearchInput v-model =" searchVal " />
</ template >

< script >
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'

const searchVal = ref ( '' )

export default {
  components : {
    SearchInput
  } ,
  setup ( ) {
    return {
      searchVal
    }
  }
}
</ script > 

Penataan gaya

vue-search-input menyertakan gaya default ( dist/styles.css ) yang dapat Anda gunakan sebagai dasar untuk membuat CSS Anda sendiri. Semua elemen komponen berada di dalam div yang bertindak sebagai pembungkus ikon dan masukan. Kelas default untuk div wrapper adalah search-input-wrapper Anda dapat menggantinya dengan memberikan kelas ke komponen SearchInput .

Kelas dan gaya yang terikat pada komponen SearchInput akan ditambahkan ke div pembungkus.

Acara

Peristiwa yang terikat pada komponen SearchInput akan diteruskan ke elemen input .

Nama	Keterangan	Nilai yang dikembalikan
pembaruan:nilaimodel	Model terikat yang diperbarui	string

Alat peraga

Nama	Jenis	Keterangan	Bawaan
jenis	rangkaian	Jenis kolom masukan. Jenis yang diperbolehkan adalah search dan text	search
nilai model (v-model)	rangkaian	Nilai masukan	''
kelas pembungkus	rangkaian	Kelas CSS default dari div wrapper	search-input-wrapper
ikon pencarian	boolean	Menampilkan ikon "pencarian".	BENAR
ikon pintasan	boolean	Menampilkan ikon "pintasan".	BENAR
ikon jelas	boolean	Menampilkan ikon "hapus teks".	BENAR
sembunyikanShortcutIconOnBlur	boolean	Apakah akan menyembunyikan ikon pintasan saat input kehilangan fokus	BENAR
jelasOnEsc	boolean	Apakah akan menghapus kolom input saat tombol esc ditekan	BENAR
blurOnEsc	boolean	Apakah akan menghilangkan fokus dari kolom input saat tombol esc ditekan	BENAR
pilihOnFocus	boolean	Memilih teks masukan saat / penekanan tombol	BENAR
pintasanListenerEnabled	boolean	Mengaktifkan fungsionalitas untuk penekanan tombol /	BENAR
shortcutKey	rangkaian	key untuk fungsionalitas pintasan	/

slot

vue-search-input menyertakan beberapa ikon default tetapi Anda juga dapat menyesuaikannya agar sesuai dengan kebutuhan Anda menggunakan slots yang tersedia.

Nama	Keterangan	Konten bawaan
ikon pencarian	Slot untuk ikon pencarian	<i class="search-icon search"></i>
ikon pintasan	Slot untuk ikon pintasan	<i class="search-icon shortcut" title='Press "/" to search'></i>
ikon yang jelas	Slot untuk ikon bening { clear: () => void } fungsi yang menghapus input	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
menambahkan	Menambahkan item di dalam pembungkus masukan, sebelum ikon pencarian	-
tambahkan-dalam	Menambahkan item di dalam pembungkus masukan, setelah ikon pencarian	-
tambahkan	Menambahkan item di dalam pembungkus masukan langsung setelah elemen masukan	-
prepend-luar	Menambahkan item di dalam pembungkus masukan langsung setelah ikon hapus	-