test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-02 12:07:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

优化搜索面板快捷键操作

Browse Source
This commit is contained in:
Hooray 2022-04-25 20:25:46 +08:00
parent 0572573374
commit 1b825b72b7
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/layout/components/Search/index.vue
View File

@ -42,8 +42,8 @@ watch(() => isShow.value, val => {
proxy.$hotkeys('down', keyDown)
proxy.$hotkeys('enter', keyEnter)
setTimeout(() => {
proxy.$refs.input.$el.children[0].focus()
}, 100)
proxy.$refs.input.focus()
}, 500)
} else {
document.querySelector('body').classList.remove('hidden')
proxy.$hotkeys.unbind('up', keyUp)
@ -57,7 +57,7 @@ watch(() => isShow.value, val => {
})
watch(() => resultList.value, () => {
actived.value = -1
scrollTo(0)
handleScroll()
})
onMounted(() => {
@ -70,6 +70,12 @@ onMounted(() => {
isShow.value = true
}
})
proxy.$hotkeys('esc', e => {
if (settingsStore.topbar.enableNavSearch) {
e.preventDefault()
proxy.$eventBus.emit('global-search-toggle')
}
})
if (settingsStore.app.routeBaseOn !== 'filesystem') {
routeStore.routes.map(item => {
getSourceList(item.children)
@ -134,7 +140,7 @@ function keyUp() {
if (actived.value < 0) {
actived.value = resultList.value.length - 1
}
scrollTo(proxy.$refs[`search-item-${actived.value}`][0].offsetTop)
handleScroll()
}
}
function keyDown() {
@ -143,7 +149,7 @@ function keyDown() {
if (actived.value > resultList.value.length - 1) {
actived.value = 0
}
scrollTo(proxy.$refs[`search-item-${actived.value}`][0].offsetTop)
handleScroll()
}
}
function keyEnter() {
@ -151,18 +157,23 @@ function keyEnter() {
proxy.$refs[`search-item-${actived.value}`][0].click()
}
}
function scrollTo(offsetTop) {
function handleScroll() {
let scrollTo = 0
if (actived.value !== -1) {
if (
offsetTop + proxy.$refs[`search-item-${actived.value}`][0].clientHeight > proxy.$refs['search'].scrollTop + proxy.$refs['search'].clientHeight ||
offsetTop + proxy.$refs[`search-item-${actived.value}`][0].clientHeight <= proxy.$refs['search'].scrollTop
) {
proxy.$refs['search'].scrollTo({
top: offsetTop,
behavior: 'smooth'
})
scrollTo = proxy.$refs['search'].scrollTop
const activedOffsetTop = proxy.$refs[`search-item-${actived.value}`][0].offsetTop
const activedClientHeight = proxy.$refs[`search-item-${actived.value}`][0].clientHeight
const searchScrollTop = proxy.$refs['search'].scrollTop
const searchClientHeight = proxy.$refs['search'].clientHeight
if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
} else if (activedOffsetTop <= searchScrollTop) {
scrollTo = activedOffsetTop
}
}
proxy.$refs['search'].scrollTo({
top: scrollTo
})
}
</script>