Іздеу

Built-in 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 event шығарылар алдындағы миллисекундтағы кідіріс.
autofocus	boolean	false	Mount кезінде input-қа focus береді.
readonly	boolean	false	Өрісті оқылатын, бірақ өзгертілмейтін етеді.

Events

Оқиға	Дерек	Сипаттама
@search	string	Debounce кейін trimmed мәнмен шығарылады.
@clear	-	Тазарту батырмасы басылғанда шығарылады.