mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 00:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(search): round and clearable searchbar

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-11 22:47:11 +02:00
parent d55329f3ab
commit b112f5f226
No known key found for this signature in database
GPG key ID: DBD997E935996158
1 changed files with 9 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/SearchBar.vue
View file

@ -33,17 +33,15 @@ function onSelect(path: string) {
<template>
<div>
<n-auto-complete
placeholder="Search a tool..."
:options="options"
v-model:value="queryString"
:input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect"
>
<template #prefix>
<n-icon>
<search-round />
</n-icon>
<n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect">
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
<n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
@focus="handleFocus" @blur="handleBlur">
<template #prefix>
<n-icon :component="SearchRound" />
</template>
</n-input>
</template>
</n-auto-complete>
</div>