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

本文主要是介绍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 })}}
},