用户会接收消息,接收到消息后,需要把待完成的菜单状态改成未读(加上小红点提示)
例如菜单目录是这样的,需要完成的内容在页面 /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就表示还有未读。只是使用的时候需要保留一个原始未被操作过的菜单列表,需要更新的时候加上状态标志就可以了,这样就可以不考虑某一个菜单什么时候变成已读了。