html / vue 自动生成目录

朝阳39

已于 2024-07-08 11:26:14 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # HTML # Vue 文章标签： vue.js html 前端

于 2021-02-20 07:44:09 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/113875550

Vue 同时被 2 个专栏收录

153 篇文章

订阅专栏

HTML

24 篇文章

订阅专栏

本示例展示了如何在 Vue 中动态生成文章目录，根据 H1 到 H6 标题创建目录列表，并实现点击目录时内容区域滚动到对应标题。通过遍历 main 标签内的子元素，收集一级至六级标题信息，包括标题内容、HTML 代码、层级和偏移顶部距离。应用中还包含了一个固定定位的目录框和滚动同步功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现原理

获取全部内容节点，对节点进行遍历，将其中的标题节点存入目录列表中

完整范例代码（以vue为例）

<template>
    <div style="padding: 20px">
        <div class="menuBox">
            <p>目录</p>
            <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
                <aside v-for="i in menuList" :key="i" v-html="i.title"></aside>
            </el-scrollbar>
        </div>
        <div class="contentBox">
            <main v-for="i in Total" :key="i">
                <h1>一级标题{{i}}</h1>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
                <h2>二级标题{{i}}</h2>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
                <p>内容{{i}}</p>
            </main>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                menuList: [],
                Total: 60
            }
        },
        mounted() {
            [...document.getElementsByTagName("main")]
                .forEach(item => {
                    [...item.children].forEach(
                        item2 => {
                            if (item2.tagName === "H1") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 1,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                            if (item2.tagName === "H2") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 2,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                            if (item2.tagName === "H3") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 3,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                            if (item2.tagName === "H4") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 4,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                            if (item2.tagName === "H5") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 5,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                            if (item2.tagName === "H6") {
                                this.menuList.push(
                                    {
                                        content: item2.innerText,
                                        title: item2.outerHTML,
                                        level: 6,
                                        offsetTop: item2.offsetTop
                                    }
                                )
                            }
                        }
                    )
                })
        },
    }
</script>
<style scoped>
    /*目录悬浮*/
    .menuBox {
        position: fixed;
    }

    /*内容居中*/
    .contentBox {
        width: 60%;
        margin: auto;
    }

    /*el-scrollbar 必须指定高度*/
    .scrollMenuBox {
        height: 600px;
        width: 200px;
    }

    /*隐藏水平滚动条*/
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>