vue search input

entrada-búsqueda-vue

Un componente de entrada de búsqueda de Vue.js 3, inspirado en la entrada de búsqueda global de Storybook y GitHub.

El componente SearchInput muestra una entrada de búsqueda con algunas funciones adicionales integradas.

Características:

• Concéntrese en la entrada de búsqueda en cualquier momento presionando la tecla / en el teclado.
• Incluye un estilo CSS predeterminado, pero también es fácil incorporar tus propios estilos.
• Iconos completamente personalizables mediante slots
• Muestra un ícono x en el lado derecho de la entrada de búsqueda, que se usa para borrar el texto cuando hay un valor escrito dentro.
• El texto de búsqueda se borra presionando la tecla esc cuando la entrada de búsqueda tiene foco (configurable).

Importante: Es recomendable que incluya el componente SearchInput solo una vez en cada página.
En caso de que haya varios componentes SearchInput presentes, el primero que se muestre tendrá prioridad al presionar la tecla / .

Demostración con ejemplos

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

Instalación

npm i vue-search-input

Uso

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

Estilo

vue-search-input incluye un estilo predeterminado ( dist/styles.css ) que puede utilizar como base para crear su propio CSS. Todos los elementos del componente están dentro de un div que actúa como contenedor para los íconos y la entrada. La clase predeterminada para el div contenedor es search-input-wrapper Puede anularla proporcionando clases al componente SearchInput .

Las clases y estilos vinculados al componente SearchInput se agregarán al div contenedor.

Eventos

Los eventos vinculados al componente SearchInput se pasarán al elemento input .

Nombre	Descripción	Valor devuelto
actualización: valor del modelo	El modelo encuadernado actualizado	string

Accesorios

Nombre	Tipo	Descripción	Por defecto
tipo	cadena	El tipo de campo de entrada. Los tipos permitidos son search y text	search
modelValue (modelo v)	cadena	El valor de la entrada.	''
clase de envoltura	cadena	La clase CSS predeterminada del div contenedor	search-input-wrapper
icono de búsqueda	booleano	Muestra el icono "buscar"	verdadero
icono de acceso directo	booleano	Muestra el icono de "acceso directo"	verdadero
claroIcono	booleano	Muestra el icono de "claro texto"	verdadero
ocultarShortcutIconOnBlur	booleano	Si se debe ocultar el icono de acceso directo cuando la entrada pierde el foco	verdadero
borrarOnEsc	booleano	Si se borra el campo de entrada cuando se presiona la tecla esc	verdadero
desenfoqueOnEsc	booleano	Si se quita el foco del campo de entrada cuando se presiona la tecla esc	verdadero
seleccioneOnFocus	booleano	Selecciona el texto de la entrada al presionar la tecla /	verdadero
acceso directoListenerEnabled	booleano	Habilita la funcionalidad para la pulsación de tecla /	verdadero
tecla de acceso directo	cadena	La key para la funcionalidad de acceso directo	/

Tragamonedas

vue-search-input incluye algunos íconos predeterminados, pero también puedes personalizarlos para adaptarlos a tus necesidades usando las slots disponibles.

Nombre	Descripción	Contenido predeterminado
icono de búsqueda	Ranura para el icono de búsqueda	<i class="search-icon search"></i>
icono de acceso directo	Ranura para el icono de acceso directo	<i class="search-icon shortcut" title='Press "/" to search'></i>
icono claro	Ranura para el icono de borrar { clear: () => void } la función que borra la entrada	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
añadir	Agrega un elemento dentro del contenedor de entrada, antes del ícono de búsqueda	-
agregar-interno	Agrega un elemento dentro del contenedor de entrada, después del ícono de búsqueda	-
anteponer	Agrega un elemento dentro del contenedor de entrada directamente después del elemento de entrada	-
anteponer-externo	Agrega un elemento dentro del contenedor de entrada directamente después del ícono de borrar	-