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

接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。
最终方案:线下手动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 = nullfunction getParentNode(index) {let currentIndex = index - 1while (!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)] = itemlast = item}return res
}console.log(JSON.stringify(getTree(target.titles)))

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

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

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

相关文章

使用Java根据表名导出与导入Sql

前言 很粗糙啊&#xff0c;有很多可以优化的地方&#xff0c;而且也不安全&#xff0c;但是临时用还是OK的&#xff0c;我这个是公司里面的单机软件&#xff0c;不联网。 嗨&#xff01;我是一名社交媒体增长黑客&#xff0c;很高兴能帮助您优化和丰富关于批量作业导出和导入…

pycharm离线安装依赖包

一、对于单个下载离线包&#xff0c;然后安装 1、先去https://pypi.org/网站下载离线包&#xff0c;下载到本地&#xff1b; 2、从磁盘中找到刚刚下载包&#xff0c;点击确定就可以安装了 二、将本地项目所有依赖包全部下载下来&#xff0c;然后批量在另一个项目&#xff…

模型、策略和算法

模型(model)、策略(strategy)和算法(algorithm)是统计学习的所有内容. 模型是统计学习的最终结果&#xff0c;即决策函数(decision function) 或条件概率函数 &#xff0c;它被⽤来预测特定问题下&#xff0c;将来未知输⼊的输出结果. 策略是统计学习过程中的产⽣最优模型的评…

Redis的常用命令

Redis常用命令 1、字符串string操作命令 Redis中字符串类型常用命令: 命令含义SET key value设置指定key的值GET key获取指定key的值SETEX key seconds value设置指定key的值&#xff0c;并将key的过期时间设为seconds秒SETNX key value只有在key不存在时设置key的值 更多命…

微软杀入Web3:打造基于区块链的AI产品

作者&#xff1a;秦晋 2023年1月&#xff0c;微软向 ChatGPT 创建者 OpenAI 投资 100 亿美元&#xff0c;在AI业界引发格外关注。此举也让微软在AI的战略探索上提前取得有利位置。 2023年3月&#xff0c;微软软件工程师 Albacore 披露微软正在为Edge 浏览器测试内置的非托管加密…

【OpenCV常用函数:轮廓检测+外接矩形检测】cv2.findContours()+cv2.boundingRect()

文章目录 1、cv2.findContours()2、cv2.boundingRect() 1、cv2.findContours() 对具有黑色背景的二值图像寻找白色区域的轮廓&#xff0c;因此一般都会先经过cvtColor()灰度化和threshold()二值化后的图像作为输入。 cv2.findContous(image, mode, method[, contours[, hiera…

网神 SecGate 3600 防火墙任意文件上传漏洞复现(HW0day)

0x01 产品简介 网神SecGate3600下一代极速防火墙&#xff08;NSG系列&#xff09;是基于完全自主研发、经受市场检验的成熟稳定网神第三代SecOS操作系统 并且在专业防火墙、VPN、IPS的多年产品经验积累基础上精心研发的高性能下一代防火墙 专门为运营商、政府、军队、教育、大型…

cmake扩展(1)——VS+CMake创建Qt项目

创建项目 创建CMakeLists #cmake最低版本 cmake_minimum_required(VERSION 3.10) #项目名 project(regextool)#查找所有*.h,*.ui,*.cpp文件&#xff0c;并存入SOURCES中 file(GLOB SOURCES "*.cpp" "*.ui" "*.h")#开启moc set(CMAKE_AUTOMOC O…

Transformer(一)简述(注意力机制,NLP,CV通用模型)

目录 1.Encoder 1.1简单理解Attention 1.2.什么是self-attention 1.3.怎么计算self-attention 1.4.multi-headed 1.5.位置信息表达 2.decorder&#xff08;待补充&#xff09; 参考文献 1.Encoder 1.1简单理解Attention 比方说&#xff0c;下图中的热度图中我们希望专注于…

『赠书活动 | 第十七期』《Python网络爬虫:从入门到实战》

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 『赠书活动 &#xff5c; 第十七期』 本期书籍&#xff1a;《Python网络爬虫&#xff1a;从入门到实战》 赠书规则&#xff1a;评论区&#xff1a;点赞&#xff5c;收…

shell脚本之正则表达式

目录 一.常见的管道命令1.1sort命令1.2uniq命令1.3tr命令1.4cut命令1.5实例1.5.1统计当前主机连接状态1.5.2统计当前主机数 二.正则表达式2.1正则表达式的定义2.2常见元字符&#xff08;支持的工具&#xff1a;find&#xff0c;grep&#xff0c;egrep&#xff0c;sed和awk&…

RabbitMQ 安装教程

RabbitMQ 安装教程 特殊说明 因为RabbitMQ基于Erlang开发&#xff0c;所以安装时需要先安装Erlang RabbitMQ和Erlang版本对应关系 查看地址&#xff1a;www.rabbitmq.com/which-erlan… 环境选择 Erlang: 23.3及以上 RabbitMQ: 3.10.1Windows 安装 1. 安装Erlang 下载地…

taro Swiper组件--异形滚动

效果 <SwiperindicatorDots{false}previousMargin50pxnextMargin50pxautoplay{false}interval100onChange{onChangeSwiper} >{[1,2,3].map((item, index) > {return (<SwiperItemkey{item-${index}}><View className{demo-item ${currentIndex index ? ac…

国产航顺HK32F030M: 内部参考电压

HK32F030MF4P6 用户手册 内部参考电压 adc.c #include "bsp_adc.h"/*** brief ADC GPIO 初始化* param 无* retval 无*/ static void ADCx_GPIO_Config(void) {GPIO_InitTypeDef GPIO_InitStructure;// 打开 ADC IO端口时钟ADC_GPIO_AHBxClock_FUN ( ADC_GPIO_C…

《Zookeeper》源码分析(七)之 NIOServerCnxn的工作原理

目录 NIOServerCnxnreadPayload()handleWrite(k)process() NIOServerCnxn 在上一节IOWorkRequest的doWork()方法中提到会将IO就绪的key通过handleIO()方法提交给NIOServerCnxn处理&#xff0c;一个NIOServerCnxn代表客户端与服务端的一个连接&#xff0c;它用于处理两者之间的…

Postman如何做接口测试

目录 Postman如何做接口测试1&#xff1a;如何导入 swagger 接口文档 Postman如何做接口测试2&#xff1a;如何切换测试环境 Postman如何做接口测试3&#xff1a;什么&#xff1f;postman 还可以做压力测试&#xff1f; Postman如何做接口测试4&#xff1a;如何自动添加请求…

HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具

公文一键排版系统基本完成&#xff0c;准备继续完善SysInfo&#xff0c;增加用户帐户信息&#xff0c;其中涉及到Win32_Account结构&#xff0c;其C定义如下&#xff1a; [Dynamic, Provider("CIMWin32"), UUID("{8502C4CC-5FBB-11D2-AAC1-006008C78BC7}"…

Docker安装ElasticSearch/ES

目录 前言安装ElasticSearch/ES步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 步骤2&#xff1a;拉取ElasticSearch镜像1 拉取镜像2 查看已拉取的镜像 步骤3&#xff1a;创建容器创建容器方式1&#xff…

餐馆包厢隔断装修该怎么去设计

餐馆包厢隔断装修设计需要综合考虑以下几个方面&#xff1a; 1. 功能布局&#xff1a;根据包厢的面积和形状来确定餐桌、椅子、电视等家具的摆放方式&#xff0c;保证客人的用餐舒适度和便利性。 2. 音响设备&#xff1a;安装合适的音响设备&#xff0c;提供一定的音乐背景&…

事务和事务的隔离级别

1.4.事务和事务的隔离级别 1.4.1.为什么需要事务 事务是数据库管理系统&#xff08;DBMS&#xff09;执行过程中的一个逻辑单位&#xff08;不可再进行分割&#xff09;&#xff0c;由一个有限的数据库操作序列构成&#xff08;多个DML语句&#xff0c;select语句不包含事务&…