diff --git a/src/components/Home.vue b/src/components/Home.vue index 0917791..58d6c25 100644 --- a/src/components/Home.vue +++ b/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: { diff --git a/src/components/Results.vue b/src/components/Results.vue index a7ecdae..812f252 100644 --- a/src/components/Results.vue +++ b/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; }