hokori/search-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(搜索组件): 优化搜索建议框的显示逻辑和样式

Browse Source 
在搜索输入框获得焦点时显示建议框，失去焦点时隐藏建议框。同时调整建议框的宽度和位置以更好地匹配输入框。
This commit is contained in:
hokori 2025-04-27 18:00:32 +08:00
parent a2e6660ec7
commit 8bf1240b94
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Home.vue
View File

@ -21,6 +21,8 @@
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
@keydown.down.prevent="selectNext" @keydown.down.prevent="selectNext"
@keydown.up.prevent="selectPrev" @keydown.up.prevent="selectPrev"
@focus="inputFocused = true"
@blur="inputFocused = false"
> >
<template #append> <template #append>
<el-button @click="handleSearch"> <el-button @click="handleSearch">
@ -30,7 +32,7 @@
</el-input> </el-input>
</div> </div>
<div v-if="suggestions.length > 0" class="suggestions-container"> <div v-if="suggestions.length > 0 && inputFocused" class="suggestions-container">
<div <div
v-for="(item, index) in suggestions" v-for="(item, index) in suggestions"
:key="index" :key="index"
@ -68,7 +70,8 @@ export default defineComponent({
searchQuery: '', searchQuery: '',
suggestions: [], suggestions: [],
loading: false, loading: false,
selectedIndex: -1 selectedIndex: -1,
inputFocused: false
} }
}, },
methods: { methods: {

11
src/components/Results.vue
View File

@ -27,11 +27,13 @@
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
@keydown.down.prevent="selectNext" @keydown.down.prevent="selectNext"
@keydown.up.prevent="selectPrev" @keydown.up.prevent="selectPrev"
@focus="inputFocused = true"
@blur="inputFocused = false"
/> />
<el-button @click="handleSearch" type="warning">搜索</el-button> <el-button @click="handleSearch" type="warning">搜索</el-button>
</div> </div>
<div v-if="suggestions.length > 0" class="suggestions-container"> <div v-if="suggestions.length > 0 && inputFocused" class="suggestions-container">
<div <div
v-for="(item, index) in suggestions" v-for="(item, index) in suggestions"
:key="index" :key="index"
@ -135,7 +137,8 @@ export default defineComponent({
suggestionLoading: false, suggestionLoading: false,
error: null, error: null,
suggestions: [], suggestions: [],
selectedIndex: -1 selectedIndex: -1,
inputFocused: false
} }
}, },
created() { created() {
@ -453,7 +456,7 @@ export default defineComponent({
.suggestions-container { .suggestions-container {
position: absolute; position: absolute;
width: calc(100% - 220px); /* 调整宽度以匹配输入框 */ width: calc(100% - 120px); /* 调整宽度以匹配输入框 */
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
background-color: #ffffff; background-color: #ffffff;
@ -461,7 +464,7 @@ export default defineComponent({
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 1000; z-index: 1000;
top: 100%; /* 位于搜索框正下方 */ top: 100%; /* 位于搜索框正下方 */
left: 200px; /* 与输入框左侧对齐 */ left: 110px; /* 调整与输入框左侧对齐 */
margin-top: 5px; margin-top: 5px;
} }