vue2中使用vue-markdown，并生成左侧目录结构

#### 下载依赖

npm i github-markdown-css highlight.js vue-loader vue-markdown-loader 

#### 配置 webpack

config.module

.rule("md")

.test(/\.md/)

.use("vue-loader")

.loader("vue-loader")

.end()

.use("vue-markdown-loader")

.loader("vue-markdown-loader/lib/markdown-compiler")

.options({

raw: true,

})

.end();

#### 引入依赖

// 代码高亮

import "highlight.js/styles/github.css";

// markdown样式，默认是黑色主题，可在后面追加对应主题的样式，

//如白色 /github-markdown-light.css

import "github-markdown-css";

// 对应的md文件

import HelpUseMd from "./help-use.md";

···

// 作为组件使用

components: { HelpUseMd}

<!-- 使用 -->

<help-use-md />

#### 生成左侧目录

##### 1 获取目录数据

const content =

document.getElementById("content").children[0].children[1].children;

var arr = [];

for (let i = 0; i < content.length; i++) {

let header = content[i].localName;

if (/\b[h][0-9]\b/.test(header)) {

let ele = content[i];

let name = ele.innerText;

// 设置id

ele.setAttribute("id", `md-${i}`);

arr.push({

id: `md-${i}`,

name: name,

level: Number(header.replace("h", "")),

});

}

}

// 最终的树结构

setNav(arr, 6);

###### 2 组装成树结构

// 采用的是从最高层级到最低层级的level进行循环遍历

function setNav(firstNav, lastLevel) {

let newList = [];

firstNav.map((nav, index) => {

if (nav.level < lastLevel && nav.level > 0) {

newList.push(nav);

} else if (nav.level == lastLevel) {

newList[newList.length - 1].children

? newList[newList.length - 1].children.push(nav)

: (newList[newList.length - 1].children = [nav]);

}

});

if (lastLevel > 2) {

lastLevel--;

// 采用递归循环所有数据

return setNav(newList, lastLevel);

} else {

return newList;

}

}

###### 3 滚动到对应位置

let element = document.getElementById(id);

element.scrollIntoView({

block: "center",

behavior: "smooth",

});