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,
|
useRouter,
|
||||||
type RouteRecordRaw,
|
type RouteRecordRaw,
|
||||||
} from "vue-router";
|
} from "vue-router";
|
||||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
|
import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
|
||||||
import LoginModal from "@/components/login/LoginModal.vue";
|
import LoginModal from "@/components/login/LoginModal.vue";
|
||||||
|
@ -28,6 +28,8 @@ import { useRoleStore } from "@/stores/role";
|
||||||
import { hasPermission } from "@/utils/permission";
|
import { hasPermission } from "@/utils/permission";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { rbacAnnotations } from "@/constants/annotations";
|
import { rbacAnnotations } from "@/constants/annotations";
|
||||||
|
import { useScroll } from "@vueuse/core";
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -189,6 +191,31 @@ const generateMenus = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -203,7 +230,7 @@ onMounted(generateMenus);
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 overflow-y-auto">
|
<div ref="navbarScroller" class="flex-1 overflow-y-auto">
|
||||||
<div class="px-3">
|
<div class="px-3">
|
||||||
<div
|
<div
|
||||||
class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"
|
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