vditor 在预览模式下 vditor-outline__item--current 这个类名是 怎么在滚动和 hover、click 的时候添加进去的
本贴最后更新于 345 天前，其中的信息可能已经时异事殊
相关帖子
-
EddiePeng •作者
<template> <div class="hl-editor"> <div id="preview"></div> <div id="outline"></div> </div> </template> <script setup> // 1.1 引入Vditor 构造函数 import Vditor from 'vditor' // 1.2 引入样式 import 'vditor/dist/index.css'; import { ref, onMounted } from 'vue'; // 2. 获取DOM引用 const vditor = ref() // 3. 在组件初始化时，就创建Vditor对象，并引用 onMounted(() => { Vditor.preview(document.getElementById('preview'), '### 初始化编辑器',{ after() { if(window.innerWidth <= 768) { return } const outlineElement= document.getElementById('outline') Vditor.outlineRender(document.getElementById('preview'), outlineElement) if(outlineElement.innerText.trim() !== '') { outlineElement.style.display = 'block' initOutline() } } }) }) const initOutline = () => { const headingElements = [] Array.from(document.getElementById('preview').children).forEach((item) => { if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) { headingElements.push(item) } }) let toc = [] window.addEventListener('scroll', () => { const scrollTop = window.scrollY toc = [] headingElements.forEach((item) => { toc.push({ id: item.id, offsetTop: item.offsetTop, }) }) const currentElement = document.querySelector('.vditor-outline__item--current') for (let i = 0, iMax = toc.length; i < iMax; i++) { if (scrollTop < toc[i].offsetTop - 30) { if (currentElement) { currentElement.classList.remove('vditor-outline__item--current') } let index = i > 0 ? i - 1 : 0 document.querySelector('span[data-target-id="' + toc[index].id + '"]').classList.add('vditor-outline__item--current') break } } }) } </script> <style scoped lang="scss"> .hl-editor { width: 100vw; height: 100vh; } </style> - 其他回帖
- 查看全部回帖
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于