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(null) const scrollbarRef = ref | null>(null) const searchResultRef = ref | null>(null) -const keyword = ref("") +const keyword = ref("") const resultList = shallowRef([]) const activeRouteName = ref("") +/** 是否按下了上键或下键(用于解决和 mouseenter 事件的冲突) */ +const isPressUpOrDown = ref(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 +}