YukiCCC的博客

- 博客
- 分类
- 标签
- 归档
- 友链
- 关于
- 暗黑模式

Vue3学习

一、简介1. 介绍 Vue 2 将于 2023 年 12 月 31 日停止维护，详见 Vue 2 延长 LTS。 Vue 3是Vue.js的下一个主要版本，最初于2020年9月发布，Vue 3支持Vue 2的大多数特性。 2. 优点更快更省 Object.defineProperty ——> Proxy 重构 Virtual DOM 运行速度更快，打包体积更小更...

2023-08-22 前端

"")) link.removeAttribute("href") } // 配置点击触发新的锚点定位 if (target && target.id) { link.addEventListener("click", (event) => { event.preventDefault(); // 这里的 addTop 是通过错位使得 toc 自动展开. volantis.scroll.to(target, { addTop: 5, observer: true }) // Anchor id history.pushState(null, document.title, "#" + target.id); }); } return target; }); function activateNavByIndex(target) { if (target.classList.contains("active-current")) return; document.querySelectorAll(".toc .active").forEach((element) => { element.classList.remove("active", "active-current"); }); target.classList.add("active", "active-current"); let parent = target.parentNode; while (!parent.matches(".toc")) { if (parent.matches("li")) parent.classList.add("active"); parent = parent.parentNode; } } // 方案一： volantis.activateNavIndex = 0 activateNavByIndex(navItems[volantis.activateNavIndex]) if (targets[0]) { volantis.scroll.push(() => { if (targets[0].getBoundingClientRect().top >= 0) { volantis.activateNavIndex = 0 } else if (targets[targets.length - 1].getBoundingClientRect().top < 0) { volantis.activateNavIndex = targets.length - 1 } else { for (let index = 0; index < targets.length; index++) { const target0 = targets[index]; const target1 = targets[(index + 1) % targets.length]; if (target0.getBoundingClientRect().top < 0 && target1.getBoundingClientRect().top >= 0) { volantis.activateNavIndex = index break; } } } activateNavByIndex(navItems[volantis.activateNavIndex]) }) } // 方案二： // IntersectionObserver 不是完美精确到像素级别也不是低延时性的 // function findIndex(entries) { // let index = 0; // let entry = entries[index]; // if (entry.boundingClientRect.top > 0) { // index = sections.indexOf(entry.target); // return index === 0 ? 0 : index - 1; // } // for (; index < entries.length; index++) { // if (entries[index].boundingClientRect.top <= 0) { // entry = entries[index]; // } else { // return sections.indexOf(entry.target); // } // } // return sections.indexOf(entry.target); // } // function createIntersectionObserver(marginTop) { // marginTop = Math.floor(marginTop + 10000); // let intersectionObserver = new IntersectionObserver( // (entries, observe) => { // let scrollHeight = document.documentElement.scrollHeight; // if (scrollHeight > marginTop) { // observe.disconnect(); // createIntersectionObserver(scrollHeight); // return; // } // let index = findIndex(entries); // activateNavByIndex(navItems[index]); // }, { // rootMargin: marginTop + "px 0px -100% 0px", // threshold: 0, // } // ); // sections.forEach((element) => { // element && intersectionObserver.observe(element); // }); // } // createIntersectionObserver(document.documentElement.scrollHeight); } document.addEventListener("DOMContentLoaded", () => { volantis.requestAnimationFrame(listenSidebarTOC) });