public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/SearchBar.vue
View File

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