v-md-editor自定义锚点(生成目录)数组转树结构

news2024/11/28 2:31:27

接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。
最终方案:线下手动pandoc word转markdown,然后将文档保存到前端(图片也在对应路径下)页面上菜单绑定文档,文档中自动生成目录;

issue

v-md-editor群里大佬提供了生成自定义锚点(目录)的方式,但是是数组平铺的,根据级别然后展示的时候通过距离形成视觉上的菜单,但是需求模型上是菜单可点击收缩打开方式的,因此,需要调整该数组为树结构,因为本人纯后端,在朋友帮助下,将数组转为了树

解决方法

//0 1 2 3 代表菜单级别
const target = {
	"titles": [
		{"title:": "导读","lineIndex": "1","indent": 0},
		{"title:":"功能范围","lineIndex":"1","indent":1},
		{"title:":"寻求帮助","lineIndex":"1","indent":1},
		{"title:":"业务功能介绍","lineIndex":"1","indent":0},
		{"title:":"1.二级标题","lineIndex":"1","indent":1},
		{"title:":"1.1 三级标题","lineIndex":"1","indent":2},
		{"title:":"1.1.1四级","lineIndex":"1","indent":3},
		{"title:":"1.2 san级","lineIndex":"1","indent":2},
		{"title:":"2.四3级","lineIndex":"1","indent":1},
		{"title:":"2.1四2级","lineIndex":"1","indent":2}
	]
}

function getTree(titles) {
    const res = []
    let treeNodeList = []
    let last = null

    function getParentNode(index) {
        let currentIndex = index - 1
        while (!treeNodeList[currentIndex]) {
            currentIndex--
        }
        return treeNodeList[currentIndex]
    }

    for (let i = 0, l = titles.length; i < l; i++) {
        const item = titles[i]
        if (item.indent == 0) {
            res.push(item)
            treeNodeList = []
        } else {
            // 父节点
            const currentParent = getParentNode(item.indent)
            if (currentParent.children) {
                currentParent.children.push(item)
            } else {
                currentParent.children = [item]
            }
            if (last.indent > item.indent) {
                treeNodeList = treeNodeList.splice(0, item.indent)
            }
        }
        // 把自己放到节点队列中
        treeNodeList[Number(item.indent)] = item
        last = item
    }
    return res
}

console.log(JSON.stringify(getTree(target.titles)))

最终得到的转换后的结构result
ps: 用后端逻辑开发前端真的是不好转换,总想着先去定义对象,结果根本没那么需要,强弱类型的开发方式真的太不同了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/866846.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx安装和配置文件详解

目录 1.安装Nginx1.yum安装2.编译安装3.Nginx命令 2.配置文件详解 1.安装Nginx 1.yum安装 [rootdocker ~]# yum -y install nginx通过 rpm -ql nginx 查看安装信息 2.编译安装 2.1安装所需要的依赖 yum install -y gcc gcc-c make libtool wget pcre pcre-devel zlib zlib-…

【雕爷学编程】Arduino动手做(13)---TTP223B电容式触摸模块之通过串口监视器检测电容触摸键的状态与控制继电器

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

学习three.js —— 第一天

1.创建三要素 场景 // 创建场景 const scene new THREE.Scene() 相机 // 创建透视相机 const camera new THREE.PerspectiveCamera(a,b,c,d) // 参数含义 // a:相机可视垂直角度&#xff1b;b:相机可视长宽比&#xff1b;c&#xff1a;近端距离&#xff1b;d&#xff1a;远端…

YOLOv5改进系列(19)——替换主干网络之Swin TransformerV1(参数量更小的ViT模型)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制

小结:基于 JavaWeb 的宠物店管理系统

宠物店管理系统 系统介绍系统展示登录界面用户注册页面 店主主界面宠物信息管理页面修改宠物信息 宠物出入库管理页面宠物订单查询页面宠物账单查看页面用户信息管理页面修改用户信息 用户主界面宠物订购页面用户订购支付页面 个人资料编辑页面个人订单查看页面 系统说明开发环…

尚硅谷大数据项目《在线教育之采集系统》笔记005

视频地址&#xff1a;尚硅谷大数据项目《在线教育之采集系统》_哔哩哔哩_bilibili 目录 P057 P058 P059 P060 P061 P062 P063 P064 P065 P066 P067 P068 P069 P070 P071 P072 P073 P057 #!/bin/bashMAXWELL_HOME/opt/module/maxwell/maxwell-1.29.2status_ma…

虚拟机的创建与使用

一、虚拟机的下载 链接&#xff1a;百度网盘下载链接 提取码&#xff1a;a9p4 二、新建虚拟机系统 需要有版本序列号 注意: 选择 第一个是纯dos 的窗口指令 桌面没有任何东西 选择第二个就是正常的操作系统.有文件夹 我的电脑之类的 三、从主机中复制文件到虚拟机中需要安装 …

【自用】JAVA复习(初级到循环 0-156集):break、while、for、continue、return

总览 1.break 2.while 3.for 4.continue 5.return 一、break 1.作用 跳出当前的循环。 2.break 在多重循环中的使用&#xff1a;配合标签使用 二、while 三、for 1.for( ; ; )、for( ; i<10 ; ) 四、continue 1.作用 用于结束本次循环&#xff0c;开始下一次循环 …

C语言笔试训练【第九天】

文章目录 &#x1f47f;1、下列程序的输出是&#xff08; &#xff09;&#x1f48e;2、二维数组X按行顺序存储&#xff0c;其中每个元素占1个存储单元。若 X[4][4] 的存储地址为 Oxf8b82140 , X[9][9] 的存储地址为 Oxf8b8221c ,则 X[7][7] 的存储地址为&#xff08; &#xf…

软件外包开发的VUE开发框架

Vue.js&#xff08;通常简称为Vue&#xff09;是一个流行的渐进式JavaScript框架&#xff0c;用于构建用户界面。它的核心库专注于视图层&#xff0c;但也可以结合其他库和工具来构建完整的单页面应用&#xff08;SPA&#xff09;。以下分享Vue.js的开发框架和特点&#xff0c;…

春秋云镜 CVE-2022-0948

春秋云镜 CVE-2022-0948 WordPress plugin Order Listener for WooCommerce SQLI 靶标介绍 WordPress 插件 Order Listener for WooCommerce 3.2.2 之前版本存在 SQL注入漏洞。 启动场景 漏洞利用 EXP curl http://example.com/?rest_route/olistener/new --data {"…

分布式学习最佳实践:从分布式系统的特征开始

正文   在延伸feature&#xff08;分布式系统需要考虑的特性&#xff09;的时候&#xff0c;我逐渐明白&#xff0c;这是因为要满足这些feature&#xff0c;才设计了很多协议与算法&#xff0c;也提出了一些理论。比如说&#xff0c;这是因为要解决去中心化副本的一致性问题&…

SCAU操作系统知识点之(六)并发:死锁和饥饿

1、死锁原因&#xff1a;竞争资源、进程推进顺序不当 2、资源分配图&#xff08;若死锁&#xff0c;则资源分配图中必有环路&#xff0c;但有环路时不一定死锁&#xff09; 3、死锁的四个必要条件 ①互斥 ②占有且等待 ③不可抢占 ④循环等待 在死锁的四个必要条件中&#xff…

jupyter默认工作目录的更改

1、生成配置文件&#xff1a;打开Anaconda Prompt&#xff0c;输入如下命令 jupyter notebook --generate-config询问[y/N]时输入y 2、配置文件修改&#xff1a;根据打印路径打开配置文件jupyter_notebook_config.py&#xff0c;全文搜索找到notebook_dir所在位置。在单引号中…

Vue组件库

Vue组件库 ViteVue3TypescriptTSX 1、项目搭建 1.1、创建项目&#xff08;yarn&#xff09; D:\WebstromProject>yarn create vite yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh pa…

python使用matplot库绘图颜色表

matlpot的color参数可以是十六进制&#xff0c;也可以是颜色描述的字符串。 下面是字符串描述的颜色表。为了颜色间要有区分度。同时要求颜色比较明显&#xff0c;特意选择一些比较有代表性的颜色&#xff0c;以供使用&#xff08;颜色由于个人需要&#xff0c;除去了红色和绿…

SpringBoot启动图标替换-banner文件

1.banner.txt文件内容如下 ${AnsiColor.BRIGHT_YELLOW}${AnsiStyle.BOLD}_________ .__ __________ __ / _____/____________|__| ____ ____\______ \ ____ _____/ |_ \_____ \\____ \_ __ \ |/ \ / ___\| | _//…

实践|Linux 中查找和删除重复文件

动动发财的小手&#xff0c;点个赞吧&#xff01; 如果您习惯使用下载管理器从互联网上下载各种内容&#xff0c;那么组织您的主目录甚至系统可能会特别困难。 通常&#xff0c;您可能会发现您下载了相同的 mp3、pdf 和 epub&#xff08;以及各种其他文件扩展名&#xff09;并将…

tkinter文件对话框

文章目录 文件对话框文件对象文件类型其他参数 tkinter系列&#xff1a; GUI初步&#x1f48e;布局&#x1f48e;绑定变量&#x1f48e;绑定事件&#x1f48e;消息框扫雷小游戏&#x1f48e;强行表白神器 文件对话框 filedialog提供了多种与文件交互相关的对话框&#xff0c…

Linux:Shell编辑之文本处理器(awk)

目录 绪论 1、用法 1.1 格式选项 1.2 awk 常用内置变量 1.3 awk的打印功能 1.4 奇偶打印 1.5 awk运算 1.6 awk的内置函数&#xff1a;getline 1.7 文本过滤打印 1.8 awk条件判断打印 1.9 三元表达式&#xff0c;类似于java 1.10 awk的精确筛选 1.11 awk和tr比较改变…