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
src/components
Home.vueResults.vue

7
src/components/Home.vue

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

11
src/components/Results.vue

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