From f12f33014e75a5d730a7115f888104041c0d4523 Mon Sep 17 00:00:00 2001
From: ClariS <1457715339@qq.com>
Date: Mon, 14 Aug 2023 16:00:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=88=97=E8=A1=A8=E6=BB=9A=E5=8A=A8=20BUG=20?=
 =?UTF-8?q?(#105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchMenu/SearchModal.vue  | 27 ++++++++++++++++++----
 src/components/SearchMenu/SearchResult.vue |  3 +++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/SearchMenu/SearchModal.vue b/src/components/SearchMenu/SearchModal.vue
index 562762a..1fc4c4b 100644
--- a/src/components/SearchMenu/SearchModal.vue
+++ b/src/components/SearchMenu/SearchModal.vue
@@ -26,9 +26,11 @@ const inputRef = ref<HTMLInputElement | null>(null)
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
 const searchResultRef = ref<InstanceType<typeof SearchResult> | null>(null)
 
-const keyword = ref("")
+const keyword = ref<string>("")
 const resultList = shallowRef<RouteRecordRaw[]>([])
 const activeRouteName = ref<RouteRecordName>("")
+/** 是否按下了上键或下键（用于解决和 mouseenter 事件的冲突） */
+const isPressUpOrDown = ref<boolean>(false)
 
 /** 控制搜索对话框宽度 */
 const modalWidth = computed(() => (appStore.device === DeviceEnum.Mobile ? "80vw" : "40vw"))
@@ -76,13 +78,15 @@ const handleClose = () => {
 
 /** 根据下标位置进行滚动 */
 const scrollTo = (index: number) => {
-  const scrollTop = searchResultRef.value?.getScrollTop(index)
+  if (!searchResultRef.value) return
+  const scrollTop = searchResultRef.value.getScrollTop(index)
   // 手动控制 el-scrollbar 滚动条滚动，设置滚动条到顶部的距离
-  scrollTop && scrollbarRef.value?.setScrollTop(scrollTop)
+  scrollbarRef.value?.setScrollTop(scrollTop)
 }
 
 /** 键盘上键 */
 const handleUp = () => {
+  isPressUpOrDown.value = true
   const { length } = resultList.value
   if (length === 0) return
   const index = resultList.value.findIndex((item) => item.name === activeRouteName.value)
@@ -98,6 +102,7 @@ const handleUp = () => {
 
 /** 键盘下键 */
 const handleDown = () => {
+  isPressUpOrDown.value = true
   const { length } = resultList.value
   if (length === 0) return
   const index = resultList.value.findIndex((item) => item.name === activeRouteName.value)
@@ -118,6 +123,11 @@ const handleEnter = () => {
   router.push({ name: activeRouteName.value })
   handleClose()
 }
+
+/** 释放上键或下键 */
+const handleReleaseUpOrDown = () => {
+  isPressUpOrDown.value = false
+}
 </script>
 
 <template>
@@ -128,6 +138,7 @@ const handleEnter = () => {
     @keydown.up="handleUp"
     @keydown.down="handleDown"
     @keydown.enter="handleEnter"
+    @keyup.up.down="handleReleaseUpOrDown"
     :before-close="handleClose"
     :width="modalWidth"
     top="5vh"
@@ -142,8 +153,14 @@ const handleEnter = () => {
     <el-empty v-if="resultList.length === 0" description="暂无搜索结果" :image-size="100" />
     <template v-else>
       <p>搜索结果</p>
-      <el-scrollbar ref="scrollbarRef" max-height="40vh">
-        <SearchResult ref="searchResultRef" v-model="activeRouteName" :list="resultList" @click="handleEnter" />
+      <el-scrollbar ref="scrollbarRef" max-height="40vh" always>
+        <SearchResult
+          ref="searchResultRef"
+          v-model="activeRouteName"
+          :list="resultList"
+          :isPressUpOrDown="isPressUpOrDown"
+          @click="handleEnter"
+        />
       </el-scrollbar>
     </template>
     <template #footer>
diff --git a/src/components/SearchMenu/SearchResult.vue b/src/components/SearchMenu/SearchResult.vue
index aa4cea6..74a74b7 100644
--- a/src/components/SearchMenu/SearchResult.vue
+++ b/src/components/SearchMenu/SearchResult.vue
@@ -5,6 +5,7 @@ import { type RouteRecordName, type RouteRecordRaw } from "vue-router"
 interface Props {
   modelValue: RouteRecordName
   list: RouteRecordRaw[]
+  isPressUpOrDown: boolean
 }
 
 const props = defineProps<Props>()
@@ -36,6 +37,8 @@ const itemStyle = (item: RouteRecordRaw) => {
 
 /** 鼠标移入 */
 const handleMouseenter = (item: RouteRecordRaw) => {
+  // 如果上键或下键与 mouseenter 事件同时生效，则以上下键为准，不执行该函数的赋值逻辑
+  if (props.isPressUpOrDown) return
   activeRouteName.value = item.name!
 }