Поиск

Фокусированное поле поиска со встроенным debounce, search icon и clear button.

Установка

npx alixan-ui-nuxt add search

Использование

Use v-model for the raw value and listen to @search for the debounced value.

Debounced value: empty

<script setup lang="ts">
const value = ref('')
const debouncedValue = ref('')
</script>

<template>
  <Search
    v-model="value"
    placeholder="Search services"
    @search="debouncedValue = $event"
  />
</template>

Debounce

Change the delay with the debounce prop. The default is 300 milliseconds.

Debounced value: empty

<script setup lang="ts">
const value = ref('')
const debouncedValue = ref('')
</script>

<template>
  <Search
    v-model="value"
    :debounce="150"
    placeholder="Fast search"
    @search="debouncedValue = $event"
  />
</template>

Справочник API

Props

Свойство	Тип	По умолчанию	Описание
modelValue	string	''	Значение поиска, используемое через v-model.
placeholder	string	'Search'	Placeholder внутри поля поиска.
debounce	number	300	Задержка в миллисекундах перед search-событием.
autofocus	boolean	false	Фокусирует поле при mount.
readonly	boolean	false	Делает поле читаемым, но недоступным для редактирования.

Events

Событие	Данные	Описание
@search	string	Вызывается с trimmed значением после debounce.
@clear	-	Вызывается при клике на кнопку очистки.