sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-06 07:40:50 +08:00
Code Activity

feat(PageIndicator): rename navRef to pageIndicator and update CSS class

Browse Source
This commit is contained in:
sendevia
2025-12-05 23:29:48 +08:00
parent 932136193f
commit 4d3ac96a62
2 changed files with 11 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.vitepress/theme/components/PageIndicator.vue
View File

@@ -5,7 +5,7 @@ import { useScreenWidthStore } from "../stores/screenWidth";
const { page, frontmatter } = useGlobalData();
const screenWidthStore = useScreenWidthStore();
const navRef = ref<HTMLElement | null>(null);
const pageIndicator = ref<HTMLElement | null>(null);
const indicator = ref({ top: "0px", left: "0px", width: "100%", height: "0px", opacity: 0 });
const headings = ref<Array<{ id: string; text: string; level: number }>>([]);
const headingsActiveId = ref<string>("");
@@ -95,7 +95,7 @@ function createObserver() {
}
function updateIndicator() {
const nav = navRef.value;
const nav = pageIndicator.value;
if (!nav) return;
const id = headingsActiveId.value;
@@ -129,22 +129,22 @@ function toggleMonitoring(shouldMonitor: boolean) {
createObserver();
nextTick(() => updateIndicator());
if ((window as any).ResizeObserver && navRef.value) {
if ((window as any).ResizeObserver && pageIndicator.value) {
ro = new ResizeObserver(() => updateIndicator());
ro.observe(navRef.value);
navRef.value.querySelectorAll("[data-id]").forEach((el) => ro!.observe(el as Element));
ro.observe(pageIndicator.value);
pageIndicator.value.querySelectorAll("[data-id]").forEach((el) => ro!.observe(el as Element));
}
if ((window as any).MutationObserver && navRef.value) {
if ((window as any).MutationObserver && pageIndicator.value) {
mo = new MutationObserver(() => {
nextTick(() => {
updateIndicator();
if (ro && navRef.value) {
navRef.value.querySelectorAll("[data-id]").forEach((el) => ro!.observe(el as Element));
if (ro && pageIndicator.value) {
pageIndicator.value.querySelectorAll("[data-id]").forEach((el) => ro!.observe(el as Element));
}
});
});
mo.observe(navRef.value, { childList: true, subtree: true });
mo.observe(pageIndicator.value, { childList: true, subtree: true });
}
} else {
pageIndicatorObserver?.disconnect();
@@ -252,7 +252,7 @@ if (typeof window !== "undefined") {
</script>
<template>
<div class="page-indicator" aria-label="页面目录" ref="navRef">
<div ref="pageIndicator" class="PageIndicator" aria-label="页面目录">
<p>在此页上</p>
<h3>{{ frontmatter.title ? frontmatter.title : page.title }}</h3>

11
.vitepress/theme/styles/components/PageIndicator.scss
View File

@@ -1,6 +1,6 @@
@use "../mixin";
.page-indicator {
.PageIndicator {
position: relative;
user-select: none;
@@ -123,17 +123,8 @@
}
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 840px) {
.page-indicator {
display: none;
}
}
@media screen and (max-width: 600px) {
}