react+antd+dva项目：在菜单栏添加通知红色标徽

最新推荐文章于 2024-08-07 09:02:52 发布

一下子就醒了

最新推荐文章于 2024-08-07 09:02:52 发布

阅读量3.4k

点赞数 1

分类专栏：前端杂谈工具函数文章标签：菜单栏标徽 react dva antd

本文链接：https://blog.csdn.net/weixin_42442713/article/details/95733324

版权

本文介绍了如何在基于React、Ant Design和Dva的项目中，通过修改菜单配置和组件，实现当有新消息时在菜单栏显示醒目的红色标徽，以提醒后台管理员及时处理。主要涉及三个步骤：菜单配置、侧边菜单组件的修改以及未读消息数量的获取。示例代码采用偏函数式编程风格，并展示了在不同场景下的应用。

摘要由CSDN通过智能技术生成

效果图如图：

目的是当有新消息来临的时候，可以醒目地出现在后台的菜单栏，对未处理的消息一目了然，及时提醒后台管理员，快速处理消息。

由于各自搭建的项目环境和编写代码的方式不一样，在这里只展示实现的思路和部分代码，仅供参考于学习。

三处修改：

1.在菜单配置文件配置：

{
      name: '消息记录',
      icon: 'notification',
      path: 'notification',
      showBadge: "notification",
      authority: AUTH.NOTIFICATION,
    },

2.侧边菜单组件文件：

渲染标徽的函数

 // </Badge>是antd 提供的标徽组件 ，count是展示传入的数量
 generateBadge(item, content, dot = false) {
    const { global } = this.props;
    if (item && item.showBadge && Number.isInteger(global[item.showBadge]) && 
    global[item.showBadge] > 0)
      return (
        <Badge dot={dot} count={global[item.showBadge]} offset={[15, 7]}
          style={
  {
            boxShadow: '0 0 0 1px transparent inset',