el-menu + el-badge 菜单加红点标识el-badge

el-menu + el-badge 菜单加红点标识el-badge

  • 一、el-menu组件
    • menu/index.vue
    • menu/submenu.vue
  • 二、获取/更新菜单红点标识


main.js引入全局组件/mixins全局混入
el-menu封装

一、el-menu组件

menu/index.vue

重点:定义 ref="menu",切换路由时调用 refreshs() 更新组件

<template><el-menu :unique-opened="true" :default-active="this.$store.state.menuData.menuActive" class="el-menu-vertical-demo" :background-color="backgroundColor" :text-color="textColor" :active-text-color="activeTextColor"><subMenu ref="menu" :menuList="sideNavMenu" :key="Math.random()"></subMenu></el-menu>
</template><script>
export default {name: "index",data() {return {backgroundColor: "#EAEEF6",textColor: "#3F434E",activeTextColor: "#2A60CC",// 菜单列表sideNavMenu: []}},mounted() { },methods: {async refreshs() {await this.getMenuBadge()this.$refs.menu.refreshs();}},watch: {$route(to, from) {this.refreshs()},},created() { },
}
</script>

menu/submenu.vue

重点:定义ref="subMenu",调用 refreshs() 更新组件,el-badge 展示标识未处理数据数量
<el-badge v-if="!!list.badgeNum" :value="list.badgeNum" :max="99"> </el-badge>

<template><div><div v-for="(list,index) in this.menuList" :key="index"><el-submenu v-if="!!list.children" :key="list.id" :index="String(list.id)"><template slot="title"><i class="menu_icon" :class="list.icon"></i><span slot="title">{{ list.name}}</span><el-badge v-if="!!list.badgeNum" :value="list.badgeNum" :max="99"> </el-badge><!-- <el-badge v-if="list.showBadge" value="new"> </el-badge> --></template><subMenu ref="subMenu" :menuList="list.children"></subMenu></el-submenu><el-menu-item v-else :index="list.path"><router-link :target="targeLink(list.path)?'_blank':''" :to="list.path"><i class="menu_icon" :class="list.icon"></i><span>{{list.name}}</span><el-badge v-if="!!list.badgeNum" :value="list.badgeNum" :max="99"> </el-badge></router-link></el-menu-item></div></div>
</template><script>
export default {name: "submenu",data() {return {}},props: {menuList: Array},mounted() { },methods: {targeLink(path) {if (path === '/aboutUs') {return true} else {return false}},refreshs() {this.$forceUpdate()if (this.$refs.subMenu) {this.$refs.subMenu.forEach(item => {item.refreshs()})}},},watch: {},created() { },
}
</script>

二、获取/更新菜单红点标识

调用 getMenuBadge() 获取/更新待办数据(红点显示数据)
api.js

import { getOneOrAllData } from '@/common/js/http'
// 菜单接口
export const getMenuListApi = p => getOneOrAllData('/getMenuListApi', p)
// 菜单角标数据接口
export const getMenuBadgeApi = {getMenuHomeBadgeApi: p => getOneOrAllData('/getMenuHomeBadgeApi ', p),//首页待办数量getMenuAboutBadgeApi: p => getOneOrAllData('/globalApi/home/examineConsumptionCount', p),//关于页核待办数量
};

mixins引入全局 public.js 文件

data() {return {// 登录人筛选后的菜单红点标识hasBadgeMenu: null,// 菜单红点标识定义badgeItem: {// 第一个参数是 hasBadgeMenu 下 obj 下标(pObjOrder)// 第二个参数是 obj 中 child 中的 obj 下标(cObjOrder)// 第三个参数是调用的接口'/basicDataReview': [0, 0, 'getMenuHomeBadgeApi'], // 首页待办数量'/publicDataReview': [0, 1, 'getMenuAboutBadgeApi'], // 关于页核待办数量},}
},
// 有权限的菜单
getMenuList() {// 调接口getMenuListApi().then(async res => {// 保存菜单数据到vuexthis.$store.commit("menuData/change_sideNavMenu", res.data);// 菜单红点标识await this.getMenuBadge()// 跳转路由this.jumpRouter(this.$store.state.menuData.sideNavMenu)})
},// 更新菜单红点标识
async getMenuBadge() {// 获取vuex中的菜单let sideMenu = this.$store.state.menuData.sideNavMenu// hasBadgeMenu 数据格式// hasBadgeMenu = [//   {//     item:{ },//     child:[//       { item: {}, api: 'getMenuHomeBadgeApi' },//       { item: {}, api: 'getMenuAboutBadgeApi' },//     ]//   }// ]// 过滤登录人所需菜单红点标识if (!this.hasBadgeMenu) {this.hasBadgeMenu = []sideMenu.forEach(item => {if (!!item.children) {item.children.forEach(cItem => {for (var key of Object.keys(this.badgeItem)) {if (cItem.path === key) {let pObjOrder = this.badgeItem[key][0]if (!this.hasBadgeMenu[pObjOrder]) {this.hasBadgeMenu[pObjOrder] = {}}if (!this.hasBadgeMenu[pObjOrder].child) {this.hasBadgeMenu[pObjOrder].child = []}let cObjOrder = this.badgeItem[key][1]if (!this.hasBadgeMenu[pObjOrder].child[cObjOrder]) {this.hasBadgeMenu[pObjOrder].child[cObjOrder] = {}}this.hasBadgeMenu[pObjOrder].child[cObjOrder].item = cItemthis.hasBadgeMenu[pObjOrder].child[cObjOrder].api = this.badgeItem[key][2]this.hasBadgeMenu[pObjOrder].item = item}}})}else { }})}// 调用红点信息接口for (let i in this.hasBadgeMenu) {if (this.hasBadgeMenu[i]) {for (let j in this.hasBadgeMenu[i].child)if (this.hasBadgeMenu[i].child[j]) {if (getMenuBadgeApi[this.hasBadgeMenu[i].child[j].api]) {await getMenuBadgeApi[this.hasBadgeMenu[i].child[j].api]().then(res => {this.hasBadgeMenu[i].child[j].item.badgeNum = res.data})} else {console.error('接口未定义');}}}}// 判断父级标识for (let j in this.hasBadgeMenu) {// this.hasBadgeMenu[j].item.showBadge = false;this.hasBadgeMenu[j].item.badgeNum = 0;for (let i in this.hasBadgeMenu[j].child) {if (!!this.hasBadgeMenu[j].child[i].item.badgeNum) {// this.hasBadgeMenu[j].item.showBadge = true;this.hasBadgeMenu[j].item.badgeNum += this.hasBadgeMenu[j].child[i].item.badgeNumbreak}}}this.$store.commit("menuData/change_sideNavMenu", sideMenu);
},
// 跳转路由
jumpRouter(menuList) {// 默认登录home页for (let i in menuList) {if (menuList[i].path === '/home') {this.$router.push({ path: menuList[i].path })break} else {this.$router.push({ path: menuList[0].path })}}
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原创】浅谈银行票据ABS的几种模式

前 言 2017年6月20日&#xff0c;中国票据网宣布下线&#xff0c;这位承载着无数票据人回忆的老朋友虽然离开了大家&#xff0c;但是**以票据类资产作为基础资产在沪深证券交易所发行的资产支持证券&#xff08;以下简称“票据ABS”&#xff09;**却方兴未艾&#xff0c;自201…

Ajax(2)

图片上传 传图片文件不能像传文字一样用JSON格式&#xff0c;可以用form-data类型携带文件 1.获取图片文件对象 2.使用FormData&#xff08;浏览器内置的构造函数&#xff09;携带图片文件 3.提交表单数据到服务器&#xff0c;返回图片网址 这里可能用到的事件监听器&#…

低功耗漏电保护电路芯片D54123B介绍

概 述 A&#xff09;、D54123B是一款高性能 CMOS 漏电保护器专用电路。芯片内部包含稳压电源、放大电路、比较器电路、延时电路、计数器电路、跳闸控制电路及跳闸驱动电路。芯片外围应用有脱扣线圈、压敏电阻、稳压二级管、二级管、电阻、电容等元器件。 B&#xff09;、内部…

权限管理系统-0.4.1

5.4 权限管理前端开发 5.4.1 src/components 新建ParentView文件夹&#xff0c;并在文件夹中新建index.vue文件。 并在index.vue中加入以下内容&#xff1a; <template><router-view /> </template>5.4.2 layout/components/Sidebar/index.vue routes() …

金蝶云星空对接打通阿里宜搭逐个单据查询接口与新增表单实例接口

金蝶云星空对接打通阿里宜搭逐个单据查询接口与新增表单实例接口 数据源平台:金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践&#xff0c;面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司&#xff0c;提供一个通用的ERP服务平台。…

5.58 BCC工具之mysqld_qslower.py解读

一,工具简介 mysqld_qslower工具用于追踪 MySQL 服务器提供的查询,并打印出那些超过延迟(查询时间)阈值的查询。默认情况下,使用的阈值为 1 毫秒。 二,代码示例 #!/usr/bin/env pythonfrom __future__ import print_function from bcc import BPF, USDT import sys# a…

网络编程:网络编程基础

一、网络发展 1.TCP/IP两个协议阶段 TCP/IP协议已分成了两个不同的协议&#xff1a; 用来检测网络传输中差错的传输控制协议TCP 专门负责对不同网络进行2互联的互联网协议IP 2.网络体系结构 OSI体系口诀&#xff1a;物链网输会示用 2.1网络体系结构概念 每一层都有自己独…

邮件营销案例分析:哪些因素决定营销效果?

邮件营销案例的关键要素&#xff1f;电子邮件营销案例有哪些&#xff1f; 邮件营销一直是一种重要的推广手段。然而&#xff0c;邮件营销的效果并非一蹴而就&#xff0c;它需要多方面的因素共同作用。AokSend将通过一系列邮件营销案例的分析&#xff0c;探讨哪些因素决定了邮件…

文件路径中带中文字符导致的编码问题‘ascii‘ codec can‘t encode characters in position ...

背景&#xff1a; 执行robot /home/12345678abc.abcde/test测试用例/TestSuites/RdmaTestDemo.robot [ ERROR ] Calling method _start_suite of listener DataDriver failed: UnicodeEncodeError: ascii codec cant encode characters in position 29-32: ordinal not in ra…

海淘网站#跨境电商#淘宝数据#建站网站#前端源码❀

代购业务近年兴起的一种购物模式&#xff0c;是帮国外客户购买中国商品。主要通过外贸代购模式&#xff0c;把淘宝、天猫等电商平台的全站商品通过API接入到你的网站上&#xff0c;瞬间就可以架设一个有数亿产品的大型网上商城&#xff0c;而且可以把这些中文的商品全部自动翻译…

@TableField(fill = FieldFill.INSERT_UPDATE)介绍和使用

TableField(fill FieldFill.INSERT_UPDATE)是什么 TableField(fill FieldFill.INSERT)、TableField(fill FieldFill.INSERT_UPDATE)这两个注解经常在项目中使用到&#xff0c;他MyBatis-Plus 库中的注解&#xff0c;它用于指定字段在执行数据库表的插入和更新操作时的填充策…

商家转账到零钱转账场景怎么选择

商家转账到零钱是什么&#xff1f; 商家转账到零钱功能整合了企业付款到零钱和批量转账到零钱&#xff0c;支持批量对外转账&#xff0c;操作便捷。如果你的应用场景是单付款&#xff0c;体验感和企业付款到零钱基本没差别。 商家转账到零钱的使用场景有哪些&#xff1f; 商…

【强化学习2--基于策略梯度的方法】

文章目录 深度强化学习---基于策略梯度的方法为什么要用策略梯度方法&#xff1f;策略梯度方法的优势策略梯度定理REINFORCEActor-CriticA2C:Advantage Actor-CriticPPO总结 深度强化学习—基于策略梯度的方法 本篇主要介绍单智能体强化学习——基于策略梯度的方法。 为什么要…

如何利用百度SEO优化技巧将排到首页

拥有一个成功的网站对于企业和个人来说是至关重要的&#xff0c;在当今数字化的时代。在互联网上获得高流量和优质的访问者可能并不是一件容易的事情&#xff0c;然而。一个成功的SEO战略可以帮助你实现这一目标。需要一些特定的技巧和策略、但要在百度搜索引擎中获得较高排名。…

手写简易操作系统(六)--内存分页

前情提要 上一节我们讲到了获取物理内存&#xff0c;这节我们将开启内存分页 一、内存分页的作用 内存分页是一种操作系统和硬件协同工作的机制&#xff0c;用于将物理内存分割成固定大小的页面&#xff08;通常为4KB&#xff09;并将虚拟内存空间映射到这些页面上。内存分页…

填涂颜色(洛谷)

题目 原题 由数字 0 0 0 组成的方阵中&#xff0c;有一任意形状的由数字 1 1 1 构成的闭合圈。现要求把闭合圈内的所有空间都填写成 2 2 2。例如&#xff1a; 6 6 6\times 6 66 的方阵&#xff08; n 6 n6 n6&#xff09;&#xff0c;涂色前和涂色后的方阵如下&#xff1…

【更新】上市公司“宽带中国”战略数据集(2000-2022年)

参照李万利&#xff08;2022&#xff09;、薛成&#xff08;2020&#xff09;等人的做法&#xff0c;根据企业所在城市入选“宽带中国”试点战略的批次构建DID。如果样本期间内企业所在城市被评选为“宽带中国” 试点城市&#xff0c;则该地区企业样本在入选当年及以后年份取1&…

video标签的src和srcObject属性的区别

在HTML的<video>标签中&#xff0c;src和srcObject是两个不同的属性。 src属性&#xff1a;用于指定视频资源的URL。可以通过设置该属性来指定一个视频文件的路径或者网络地址&#xff0c;例如 <video src"video.mp4"></video> 通过设置src属性&a…

打卡学习kubernetes——了解k8s基本概念

目录 1 Container 2 Pod 3 Node 4 Namespace 5 Service 6 Label 7 Annotations 8 Volume 1 Container Container(容器)是一种便携式、轻量级的操作系统级虚拟化技术。它使用namespace隔离不同的软件运行环境&#xff0c;并通过镜像自包含软件的运行环境&#xff0c;从而…

计算机二级真题讲解每日一题:《高校分类》

描述‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬ 修改编程模板&#xff0c;用…