twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化菜单搜索弹窗高度 (#559)

Browse Source 
* perf: 优化菜单搜索弹窗高度

* chore: 优化键盘`up`、`down`事件
This commit is contained in:
Netfan 2023-05-19 17:47:04 +08:00 committed by GitHub
parent 1f21a2d364
commit 9b57e687a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/search/components/SearchModal.vue
View File

@ -164,7 +164,7 @@ onKeyStroke("ArrowDown", handleDown);
</template> </template>
</el-input> </el-input>
<div class="search-result-container"> <div class="search-result-container">
<el-scrollbar ref="scrollbarRef" max-height="600px"> <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
<el-empty <el-empty
v-if="resultOptions.length === 0" v-if="resultOptions.length === 0"
description="暂无搜索结果" description="暂无搜索结果"

22
src/layout/components/search/components/SearchResult.vue
View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { computed, getCurrentInstance } from "vue"; import { useResizeObserver } from "@vueuse/core";
import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, computed, getCurrentInstance, onMounted } from "vue";
import enterOutlined from "@/assets/svg/enter_outlined.svg?component"; import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line"; import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
@ -26,6 +27,8 @@ interface Emits {
(e: "enter"): void; (e: "enter"): void;
} }
const resultRef = ref();
const innerHeight = ref();
const props = withDefaults(defineProps<Props>(), {}); const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const instance = getCurrentInstance()!; const instance = getCurrentInstance()!;
@ -59,19 +62,32 @@ function handleTo() {
emit("enter"); emit("enter");
} }
function resizeResult() {
// el-scrollbar max-height="calc(90vh - 140px)"
innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
}
useResizeObserver(resultRef, () => {
resizeResult();
});
function handleScroll(index: number) { function handleScroll(index: number) {
const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`]; const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
if (!curInstance) return 0; if (!curInstance) return 0;
const curRef = curInstance[0] as ElRef; const curRef = curInstance[0] as ElRef;
const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px） const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
return scrollTop > 600 ? scrollTop - 600 : 0; // 600 el-scrollbar max-height="600px" return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
} }
onMounted(() => {
resizeResult();
});
defineExpose({ handleScroll }); defineExpose({ handleScroll });
</script> </script>
<template> <template>
<div class="result"> <div ref="resultRef" class="result">
<div <div
v-for="(item, index) in options" v-for="(item, index) in options"
:key="item.path" :key="item.path"