vue search input

Vue-Sucheingabe

Eine Vue.js 3-Sucheingabekomponente, inspiriert von der globalen Sucheingabe von Storybook und GitHub.

Die SearchInput Komponente zeigt eine Sucheingabe mit einigen integrierten zusätzlichen Funktionen an.

Merkmale:

• Konzentrieren Sie sich jederzeit auf die Sucheingabe, indem Sie die Taste / auf der Tastatur drücken.
• Enthält einen Standard-CSS-Stil, es ist aber auch einfach, eigene Stile einzubringen.
• Vollständig anpassbare Symbole über slots
• Zeigt ein x -Symbol auf der rechten Seite der Sucheingabe an, das zum Löschen des Textes verwendet wird, wenn darin ein Wert eingegeben wird.
• Der Suchtext wird durch Drücken der esc -Taste gelöscht, wenn die Sucheingabe den Fokus hat (konfigurierbar).

Wichtig: Es empfiehlt sich, die SearchInput Komponente nur einmal auf jeder Seite einzubinden.
Falls mehrere SearchInput Komponenten vorhanden sind, hat die zuerst angezeigte Komponente beim Drücken der / -Taste Vorrang.

Demo mit Beispielen

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

Installation

npm i vue-search-input

Verwendung

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

Styling

vue-search-input enthält einen Standardstil ( dist/styles.css ), den Sie als Grundlage für die Erstellung Ihres eigenen CSS verwenden können. Alle Elemente der Komponente befinden sich in einem div , das als Wrapper für die Symbole und die Eingabe fungiert. Die Standardklasse für das Wrapper div ist search-input-wrapper Sie können sie überschreiben, indem Sie Klasse(n) für die SearchInput Komponente bereitstellen.

An die SearchInput Komponente gebundene Klassen und Stile werden dem Wrapper div hinzugefügt.

Veranstaltungen

An die SearchInput Komponente gebundene Ereignisse werden an das input übergeben.

Name	Beschreibung	Zurückgegebener Wert
update:modelValue	Das aktualisierte gebundene Modell	string

Requisiten

Name	Typ	Beschreibung	Standard
Typ	Zeichenfolge	Der Typ des Eingabefelds. Zulässige Typen sind search und text	search
modelValue (V-Modell)	Zeichenfolge	Der Wert der Eingabe	''
WrapperClass	Zeichenfolge	Die Standard-CSS-Klasse des Wrapper-Div	search-input-wrapper
Suchsymbol	Boolescher Wert	Zeigt das Symbol „Suchen“ an	WAHR
Verknüpfungssymbol	Boolescher Wert	Zeigt das Symbol „Verknüpfung“ an	WAHR
klares Symbol	Boolescher Wert	Zeigt das Symbol „Klartext“ an	WAHR
hideShortcutIconOnBlur	Boolescher Wert	Ob das Verknüpfungssymbol ausgeblendet werden soll, wenn die Eingabe den Fokus verliert	WAHR
clearOnEsc	Boolescher Wert	Ob das Eingabefeld gelöscht werden soll, wenn die esc -Taste gedrückt wird	WAHR
UnschärfeOnEsc	Boolescher Wert	Ob der Fokus aus dem Eingabefeld genommen werden soll, wenn die esc -Taste gedrückt wird	WAHR
selectOnFocus	Boolescher Wert	Wählt den Text der Eingabe bei Tastendruck / aus	WAHR
ShortcutListenerEnabled	Boolescher Wert	Aktiviert die Funktionalität für den / -Tastendruck	WAHR
Tastenkombination	Zeichenfolge	Der key für die Shortcut-Funktionalität	/

Spielautomaten

vue-search-input enthält einige Standardsymbole, Sie können diese jedoch mithilfe der verfügbaren slots auch an Ihre Bedürfnisse anpassen.

Name	Beschreibung	Standardinhalt
Suchsymbol	Steckplatz für das Suchsymbol	<i class="search-icon search"></i>
Verknüpfungssymbol	Steckplatz für das Verknüpfungssymbol	<i class="search-icon shortcut" title='Press "/" to search'></i>
Clear-Symbol	Steckplatz für das klare Symbol { clear: () => void } die Funktion, die die Eingabe löscht	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
anhängen	Fügt ein Element innerhalb des Eingabe-Wrappers vor dem Suchsymbol hinzu	-
append-inner	Fügt ein Element innerhalb des Eingabe-Wrappers nach dem Suchsymbol hinzu	-
voranstellen	Fügt ein Element im Eingabe-Wrapper direkt nach dem Eingabeelement hinzu	-
prepend-outer	Fügt ein Element im Eingabe-Wrapper direkt nach dem Löschsymbol hinzu	-