【前端】——设置菜单的未读状态

devtools/2025/3/3 19:00:40/

用户会接收消息,接收到消息后,需要把待完成的菜单状态改成未读(加上小红点提示)
例如菜单目录是这样的,需要完成的内容在页面 /test1 里面,但是不光是需要把子菜单 /test1 标记为未完成,其父菜单也需要进行标记。

// 菜单
const menuList = [{children: [{children: [{menuUrl: '/test1',},{menuUrl: '/test2',},],},{children: [{menuUrl: '/test3',},],},],},
]
// 未读列表
const noticeList = [{routeUrl: '/test1',},{routeUrl: '123',},
]

话不多说,直接上代码

// 更新菜单状态
const refreshMenuStatus = () => {const newMenu = JSON.parse(JSON.stringify(unref(menuList)))unref(noticeList).forEach((element) => {newMenu.forEach((menu) => {hasUnread(menu, element.routeUrl)})})console.log(newMenu)
}// 判断是否有未读
function hasUnread(menu, str) {let has = falseif (menu.menuUrl && str && menu.menuUrl === str) {return true}for (const child of menu.children) {if (child.menuUrl === str) {has = true}if (child.children && child.children.length > 0) {has = hasUnread(child, str) // 判断孙子有没有,孙子有他也有}// 只要有就有if (has) {child.hasUnread = has // 他有就是有menu.hasUnread = has // 他有,他爹也有return has}}return has
}

直接调用 refreshMenuStatus()
在这里插入图片描述
其中hasUnread就表示还有未读。只是使用的时候需要保留一个原始未被操作过的菜单列表,需要更新的时候加上状态标志就可以了,这样就可以不考虑某一个菜单什么时候变成已读了。


http://www.ppmy.cn/devtools/164253.html

相关文章

计算机毕业设计Hadoop+Spark+DeepSeek-R1大模型音乐推荐系统 音乐数据分析 音乐可视化 音乐爬虫 知识图谱 大数据毕业设计

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

达梦:内存相关参数

目录 28个相关参数1. 内存池相关MEMORY_POOLMEMORY_N_POOLSMEMORY_BAK_POOL 2. 大缓冲区相关HUGE_BUFFERHUGE_BUFFER_POOLS 3. 共享缓冲区相关BUFFERBUFFER_POOLSBUFFER_MODEMAX_BUFFER 4. 快速池相关FAST_POOL_PAGES 5. 回收池相关RECYCLE_POOLS 6. 回滚段池相关ROLLSEG_POOLS…

网络空间安全(6)web应用程序技术

前言 Web应用程序技术是指用于开发和构建基于Web的应用程序的技术和工具,涵盖了前端开发、后端开发、数据库管理、安全性等多个方面的技术。 一、前端开发技术 HTML/CSS/JavaScript:HTML用于构建网页结构,CSS用于进行样式设计,Jav…

【前端基础】3、HTML的常用元素(h、p、img、a、iframe、div、span)、不常用元素(strong、i、code、br)

HTML结构 一个HTML包含以下部分&#xff1a; 文档类型声明html元素 head元素body元素 例&#xff08;CSDN&#xff09;&#xff1a; 一、文档类型声明 HTML最一方的文档称为&#xff1a;文档类型声明&#xff0c;用于声明文档类型。即&#xff1a;<!DOCTYPE html>…

关于JavaScript性能问题的误解

因为 JavaScript 是单线程的&#xff0c;所以只能从上到下一行一行去执行代码&#xff0c;如果遇到大的数据量计算就会比较耗时&#xff0c;也就是我们大部分人理解的性能有问题。 写这篇文章的缘由 写这篇文章的缘由是因为公司的一个前端同事&#xff0c;抱怨为了实现产品想…

基于DeepSeek 的图生文最新算法 VLM-R1

目录 一、算法介绍 二 算法部署 三 模型下载 四 算法测试 五 可视化脚本 一、算法介绍 VLM-R1:稳定且可通用的 R1 风格大型视觉语言模型 自从 Deepseek-R1 推出以来,出现了许多专注于复制和改进它的作品。在这个项目中,我们提出了 VLM-R1,一种稳定且可通用的 R1 风格…

【Linux网络#13】:网络层(IP 协议 网络通信 全球网络 路由转发)

&#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;Linux—登神长阶 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&#x1f3fd;留言 &#x1f60d;收藏 &#x1f49e; &#x1f49e; &#x1f49e; 最后的最后&#xff0c;这里送…

对“预训练”的理解

预训练有什么用 传统的机器学习是偏数学的&#xff0c;对数据的量不做过多要求&#xff0c;而深度学习的项目通常是有大量的数据可供使用。 在平常的任务或者项目中&#xff0c;我们可能并没有大量数据&#xff0c;只有少量数据&#xff0c;在这时我们就可以通过“借用”有大…