如何给侧边栏添加 Badge 计数标记

心已赠人 2023-10-14 04:19 16阅读 0赞

## 一、需求功能 ##

给侧边菜单栏或及子菜单栏添加计数标记 el-badge

效果如下：

![c69801787b5e47829a77b8e1d867055f.png][]

## 二、实现思路 ##

*  结合 icon 图标渲染的思路，通过在layout 的 item.vue 中使用 vnodes.push 方法实现对`<el-badge />` 的渲染。
 *  在通过 Vuex 的状态管理将菜单栏需要的数据转递过来
 *  过滤不需要的菜单栏

layout目录结构

![c1620726528346d8b4fc2b1e0bf9a981.png][]

## 三、 具体实现步骤 ##

1.渲染 <el-badge /> ：src\\layout\\components\\Sidebar\\Item.vue

2.num值由父页面传递

3.获取num方式：从缓存获取

![9220361bd86d4c21810a023cb09c3369.png][]

4.在登录页面将mun值存入缓存中

登录页面：src\\store\\modules\\user.js(这个根据项目结构来看)

localStorage.setItem("approve_num", response.total)

5.当num数量动态减少时，侧边栏的数组需要跟着变化，可以用以下方法实现

//给红色提示赋值--start
              localStorage.setItem("approve_num", response.total)
              const elx = document.getElementById("elBadge").getElementsByClassName("el-badge__content el-badge__content--undefined")[0]
              elx.innerHTML = response.total
              //给红色提示赋值--end

##  ##

[c69801787b5e47829a77b8e1d867055f.png]: https://img-blog.csdnimg.cn/c69801787b5e47829a77b8e1d867055f.png
[c1620726528346d8b4fc2b1e0bf9a981.png]: https://img-blog.csdnimg.cn/c1620726528346d8b4fc2b1e0bf9a981.png
[9220361bd86d4c21810a023cb09c3369.png]: https://img-blog.csdnimg.cn/9220361bd86d4c21810a023cb09c3369.png