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

用户会接收消息，接收到消息后，需要把待完成的菜单状态改成未读（加上小红点提示）
例如菜单目录是这样的，需要完成的内容在页面 /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) {
  if (!str) return false
  if (menu.menuUrl === str) return true

  for (const child of menu.children || []) {
    if (child.menuUrl === str || hasUnread(child, str)) {
      child.hasUnread = true
      menu.hasUnread = true
      return true
    }
  }

  return false
}

直接调用 refreshMenuStatus（）

其中hasUnread就表示还有未读。只是使用的时候需要保留一个原始未被操作过的菜单列表，需要更新的时候加上状态标志就可以了，这样就可以不考虑某一个菜单什么时候变成已读了。