mirror of https://github.com/halo-dev/halo-admin
perf: add supports for storing navbar position (#865)
#### What type of PR is this? /kind improvement #### What this PR does / why we need it: 支持保存侧板滚动条位置,防止切换路由时侧边栏的抖动。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/3240 #### Screenshots: before: ![2023-02-20 12 12 05](https://user-images.githubusercontent.com/21301288/220007834-12658cf2-e8a8-42ea-93b1-2c58419edbac.gif) after: ![2023-02-20 12 11 19](https://user-images.githubusercontent.com/21301288/220007742-58471b69-cfd1-4576-babd-5516d2c0de1d.gif) #### Special notes for your reviewer: 测试方式: 1. 调整浏览器高度,让侧边栏菜单区域出现滚动条。 2. 测试点击底部的任意菜单项,跳转页面之后,观察滚动条是否与之前的位置保持一致。 #### Does this PR introduce a user-facing change? ```release-note Console 端侧边栏滚动条支持缓存位置,防止切换路由时重置滚动条位置。 ```pull/873/head^2
parent
cf34b86540
commit
d396337d55
|
@ -18,7 +18,7 @@ import {
|
|||
useRouter,
|
||||
type RouteRecordRaw,
|
||||
} from "vue-router";
|
||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import axios from "axios";
|
||||
import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
|
||||
import LoginModal from "@/components/login/LoginModal.vue";
|
||||
|
@ -28,6 +28,8 @@ import { useRoleStore } from "@/stores/role";
|
|||
import { hasPermission } from "@/utils/permission";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { rbacAnnotations } from "@/constants/annotations";
|
||||
import { useScroll } from "@vueuse/core";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
@ -189,6 +191,31 @@ const generateMenus = () => {
|
|||
};
|
||||
|
||||
onMounted(generateMenus);
|
||||
|
||||
// store scroll position
|
||||
const navbarScroller = ref();
|
||||
const { y } = useScroll(navbarScroller);
|
||||
|
||||
const useNavbarScrollStore = defineStore("navbar", {
|
||||
state: () => ({
|
||||
y: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
const navbarScrollStore = useNavbarScrollStore();
|
||||
|
||||
watch(
|
||||
() => y.value,
|
||||
() => {
|
||||
navbarScrollStore.y = y.value;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
y.value = navbarScrollStore.y;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -203,7 +230,7 @@ onMounted(generateMenus);
|
|||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div ref="navbarScroller" class="flex-1 overflow-y-auto">
|
||||
<div class="px-3">
|
||||
<div
|
||||
class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"
|
||||
|
|
Loading…
Reference in New Issue