Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

在 vue 的自定义组件中实现 v-modelvue2 自定义组件的 v-model<input v-model="val"> <!-- 等价于 --> <input :value="val" @input="val = $event.target.value"> ... return{...
ink = element.querySelector(".toc-link"); const target = document.getElementById( decodeURI(link.getAttribute("href")).replace("#", "") ); targets.push(target) // 解除 a 标签 href 的 锚点定位, a 标签 href 的 锚点定位 会随机启用?? 产生错位??? link.setAttribute("onclick","return false;") link.setAttribute("toc-action","toc-"+decodeURI(link.getAttribute("href")).replace("#", "")) link.setAttribute("href","/") // 配置 点击 触发新的锚点定位 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]) 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(listennSidebarTOC) }); document.addEventListener("pjax:success", ()=>{ volantis.requestAnimationFrame(listennSidebarTOC) });