vue search input

vue-search-entrée

Un composant d'entrée de recherche Vue.js 3, inspiré de l'entrée de recherche globale de Storybook et GitHub.

Le composant SearchInput affiche une entrée de recherche avec quelques fonctionnalités supplémentaires intégrées.

Caractéristiques:

• Concentrez-vous à tout moment sur la saisie de recherche en appuyant sur la touche / du clavier.
• Inclut un style CSS par défaut, mais il est également facile d'apporter vos propres styles.
• Icônes entièrement personnalisables via slots
• Affiche une icône x sur le côté droit de l'entrée de recherche, utilisée pour effacer le texte lorsqu'une valeur est saisie à l'intérieur.
• Le texte de recherche est effacé en appuyant sur la touche esc lorsque l'entrée de recherche a le focus (configurable).

Important : Il est conseillé d'inclure le composant SearchInput une seule fois sur chaque page.
Dans le cas où plusieurs composants SearchInput sont présents, le premier affiché aura la priorité sur la pression de la touche / .

Démo avec exemples

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

Installation

npm i vue-search-input

Usage

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

Stylisme

vue-search-input inclut le style par défaut ( dist/styles.css ) que vous pouvez utiliser comme base pour créer votre propre CSS. Tous les éléments du composant se trouvent dans un div qui sert de wrapper pour les icônes et l'entrée. La classe par défaut pour le div wrapper est search-input-wrapper vous pouvez la remplacer en fournissant des classes au composant SearchInput .

La classe et les styles liés au composant SearchInput seront ajoutés au wrapper div .

Événements

Les événements liés au composant SearchInput seront transmis à l'élément input .

Nom	Description	Valeur renvoyée
mise à jour : valeur du modèle	Le modèle lié mis à jour	string

Accessoires

Nom	Taper	Description	Défaut
taper	chaîne	Le type du champ de saisie. Les types autorisés sont search et text	search
modelValue (v-modèle)	chaîne	La valeur de l'entrée	''
wrapperClass	chaîne	La classe CSS par défaut du wrapper div	search-input-wrapper
icône de recherche	booléen	Affiche l'icône "recherche"	vrai
icône de raccourci	booléen	Affiche l'icône "raccourci"	vrai
icône claire	booléen	Affiche l'icône "texte clair"	vrai
cacherRaccourciIcôneSurFlou	booléen	S'il faut masquer l'icône de raccourci lorsque l'entrée perd le focus	vrai
clearOnEsc	booléen	S'il faut effacer le champ de saisie lorsque la touche esc est enfoncée	vrai
flouOnEsc	booléen	S'il faut retirer le focus du champ de saisie lorsque la touche esc est enfoncée	vrai
sélectionnerOnFocus	booléen	Sélectionne le texte de l'entrée en appuyant sur la touche /	vrai
raccourciListenerEnabled	booléen	Active la fonctionnalité pour la pression sur la touche /	vrai
touche de raccourci	chaîne	La key pour la fonctionnalité de raccourci	/

Machines à sous

vue-search-input inclut quelques icônes par défaut mais vous pouvez également les personnaliser en fonction de vos besoins en utilisant les slots disponibles.

Nom	Description	Contenu par défaut
icône de recherche	Emplacement pour l'icône de recherche	<i class="search-icon search"></i>
icône de raccourci	Emplacement pour l'icône de raccourci	<i class="search-icon shortcut" title='Press "/" to search'></i>
icône claire	Emplacement pour l'icône claire { clear: () => void } la fonction qui efface l'entrée	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
ajouter	Ajoute un élément à l'intérieur du wrapper d'entrée, avant l'icône de recherche	-
ajouter-intérieur	Ajoute un élément à l'intérieur du wrapper d'entrée, après l'icône de recherche	-
ajouter un préfixe	Ajoute un élément à l'intérieur du wrapper d'entrée directement après l'élément d'entrée	-
préfixe-extérieur	Ajoute un élément à l'intérieur du wrapper d'entrée directement après l'icône d'effacement	-